Niedogodności klas w JavaScript

Załóżmy, że mamy kilka klas do stylizacji wiadomości:

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

Załóżmy, że w pewnym elemencie wyświetliliśmy wiadomość sukcesu i przypisaliśmy mu odpowiednią klasę dla sukcesu:

elem.classList.add('success');

Załóżmy teraz, że w tym samym elemencie wyświetliliśmy wiadomość o błędzie i przypisaliśmy mu odpowiednią klasę dla błędu:

elem.classList.add('error');

W rezultacie okaże się, że w elemencie będą dwie klasy konfliktujące ze sobą:

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

Okazuje się, że przed dodaniem nowej klasy, musimy najpierw usunąć poprzednią:

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

To nie jest zbyt wygodne, ponieważ możemy nie wiedzieć, która dokładnie była poprzednia klasa i będziemy musieli usuwać wszystkie klasy po kolei:

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

Dane jest pole input. Po utracie fokusu sprawdź, czy wprowadzono do niego nie więcej niż 9 znaków. Jeśli tak, pokoloruj obramowanie pola na zielono, a jeśli nie - na czerwono.