L'inconveniente delle classi in JavaScript

Supponiamo di avere diverse classi per stilizzare i messaggi:

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

Supponiamo che in un elemento abbiamo visualizzato un messaggio di successo e gli abbiamo assegnato la classe corrispondente per il successo:

elem.classList.add('success');

Ora supponiamo che nello stesso elemento visualizziamo un messaggio di errore e assegniamo ad esso la classe corrispondente per l'errore:

elem.classList.add('error');

Il risultato sarà che l'elemento avrà due classi in conflitto tra loro:

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

Ciò significa che prima di aggiungere una nuova classe, dovremo prima rimuovere quella precedente:

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

Questo non è molto conveniente, poiché potremmo non sapere quale fosse esattamente la classe precedente e dovremo rimuovere tutte le classi una dopo l'altra:

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

Dato un input. Alla perdita del focus, verificate che in esso non siano stati inseriti più di 9 caratteri. Se è così, colorate il bordo dell'input in verde, altrimenti in rosso.