Неудобство классов в JavaScript

Пусть у нас есть несколько классов для стилизации сообщений:

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

Пусть в некотором элементе мы вывели успешное сообщение и назначили ему соотвестсвующий класс для успеха:

elem.classList.add('success');

Пусть теперь мы в этом же элементе вывели сообщение об ошибке и назначили ему соотвестсвующий класс для ошибки:

elem.classList.add('error');

В результате получится, что в элементе будет два конфликтующих друг с другом класса:

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

Получается, что перед добавлением нового класса, нам придется сначала удалить предыдущий:

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

Это не очень удобно, так как мы можем не знать, какой именно был предыдущий класс и нам придется удалять все классы подряд:

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

Дан инпут. По потери фокуса проверьте, что в него введено не более 9-ти символов. Если это так, покрасьте границу инпута в зеленый цвет, а если не так - в красный.