Unbequemlichkeit von Klassen in JavaScript

Nehmen wir an, wir haben mehrere Klassen zur Gestaltung von Nachrichten:

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

Nehmen wir an, wir haben in einem Element eine Erfolgsmeldung ausgegeben und ihm die entsprechende Klasse für Erfolg zugewiesen:

javascriptelem.classList.add('success');

Nehmen wir nun an, wir geben in diesem selben Element eine Fehlermeldung aus und weisen ihm die entsprechende Klasse für Fehler zu:

javascriptelem.classList.add('error');

Das Ergebnis wird sein, dass das Element zwei miteinander in Konflikt stehende Klassen haben wird:

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

Es stellt sich heraus, dass wir vor dem Hinzufügen der neuen Klasse zuerst die vorherige entfernen müssen:

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

Das ist nicht sehr praktisch, da wir vielleicht nicht wissen, welche genau die vorherige Klasse war, und wir müssten alle Klassen der Reihe nach entfernen:

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