JavaScriptにおけるクラスの不便さ

メッセージのスタイリング用にいくつかの クラスがあるとします：

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

ある要素に成功メッセージを表示し、 それに対応する成功用のクラスを 割り当てたとします：

javascriptelem.classList.add('success');

次に、同じ要素にエラーメッセージを表示し、 それに対応するエラー用のクラスを 割り当てたとします：

javascriptelem.classList.add('error');

結果的に、要素には互いに競合する 2つのクラスが存在することになります：

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');