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

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

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

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

elem.classList.add('success');

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

elem.classList.add('error');

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

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

つまり、新しいクラスを追加する前に、まず前のクラスを削除しなければならないということになります：

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

これはあまり便利ではありません。なぜなら、前のクラスが何だったか分からない場合があり、すべてのクラスを順番に削除しなければならなくなるからです：

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

入力欄があります。フォーカスが外れたときに、入力された文字数が9文字以下かどうか確認してください。もしそうなら、入力欄の境界線を緑色に、そうでない場合は赤色に変えてください。