Klasside ebamugavus JavaScriptis

Oletame, et meil on mitu klassi sõnumite stiilimiseks:

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

Oletame, et mõnes elemendis oleme kuvanud eduka sõnumi ja määranud sellele vastava edukusklassi:

javascriptelem.classList.add('success');

Oletame nüüd, et samas elemendis kuvasime veateate ja määrasime sellele vastava veaklassi:

javascriptelem.classList.add('error');

Selle tulemusena tekib olukord, kus elemendis on kaks teineteisega vastuolus olevat klassi:

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

Selgub, et enne uue klassi lisamist peame kõigepealt eelmise eemaldama:

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

See pole eriti mugav, kuna me võime ei tea, milline täpselt eelmine klass oli ja me peame eemaldama kõik klassid järjest:

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