A inconveniência das classes em JavaScript

Suponha que temos várias classes para estilizar mensagens:

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

Suponha que em um elemento exibimos uma mensagem de sucesso e atribuímos a ele a classe correspondente para sucesso:

elem.classList.add('success');

Agora, suponha que neste mesmo elemento exibimos uma mensagem de erro e atribuímos a ele a classe correspondente para erro:

elem.classList.add('error');

Como resultado, o elemento terá duas classes conflitantes entre si:

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

Isso significa que, antes de adicionar uma nova classe, precisamos primeiro remover a anterior:

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

Isso não é muito conveniente, pois podemos não saber qual era exatamente a classe anterior e teremos que remover todas as classes possíveis:

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

Dado um input. Ao perder o foco, verifique se não foram inseridos mais de 9 caracteres. Se for esse o caso, pinte a borda do input de verde, caso contrário, de vermelho.