जावास्क्रिप्ट में कक्षाओं की असुविधा

मान लीजिए कि हमारे पास संदेशों को स्टाइल करने के लिए कई कक्षाएं हैं:

css.success {
  color: green;
}
.warning {
  color: orange;
}
.error {
  color: red;
}

मान लीजिए कि किसी तत्व में हमने एक सफल संदेश प्रदर्शित किया और उसे सफलता के लिए संबंधित कक्षा निर्दिष्ट की:

javascriptelem.classList.add('success');

मान लीजिए कि अब हम उसी तत्व में एक त्रुटि संदेश प्रदर्शित करते हैं और उसे त्रुटि के लिए संबंधित कक्षा निर्दिष्ट करते हैं:

javascriptelem.classList.add('error');

परिणामस्वरूप, तत्व में दो परस्पर विरोधी कक्षाएं होंगी:

html<div id="elem" class="success error">
  text
</div>

इसका मतलब है कि नई कक्षा जोड़ने से पहले, हमें पहले पिछली कक्षा को हटाना होगा:

javascriptelem.classList.remove('success');
elem.classList.add('error');

यह बहुत सुविधाजनक नहीं है, क्योंकि हो सकता है कि हम जानते न हों कि ठीक पिछली कक्षा कौन सी थी और हमें लगातार सभी कक्षाओं को हटाना पड़ेगा:

javascriptelem.classList.remove('success');
elem.classList.remove('warning');
elem.classList.add('error');