Estilização com Classes em JavaScript

Estilizar elementos através do atributo style às vezes é conveniente, mas na maioria das vezes - não é a melhor ideia. O problema é que os estilos ficarão espalhados pelo arquivo JavaScript e será trabalhoso alterá-los. É muito mais conveniente definir estilos em arquivos CSS para que possam ser facilmente alterados, sem precisar fuçar no código JavaScript.

Suponha, por exemplo, que temos um elemento que exibe uma mensagem. A mensagem pode ser "boa" e ser exibida na cor verde, ou "ruim" e ser exibida na cor vermelha. A melhor solução neste caso seria criar as respectivas classes CSS:

css.success {
  color: green;
}
.error {
  color: red;
}

Agora, ao exibir uma mensagem "boa" vamos dar ao elemento a classe "boa":

javascriptelem.textContent = 'good';
elem.classList.add('success');

E ao exibir uma mensagem "ruim" vamos dar ao elemento a classe "ruim":

javascriptelem.textContent = 'bad';
elem.classList.add('error');