Stylisation par classes en JavaScript

Styliser des éléments via l'attribut style est parfois pratique, mais le plus souvent, ce n'est pas la meilleure idée. Le problème est que les styles seront dispersés dans le fichier JavaScript et il sera laborieux de les modifier. Il est bien plus pratique de définir les styles dans les fichiers CSS pour pouvoir les modifier facilement, sans avoir à fouiller dans le code JavaScript.

Prenons par exemple un élément affichant un message. Le message peut être "bon" et s'afficher en vert, et "mauvais" et s'afficher en rouge. La meilleure solution dans ce cas serait de créer pour cela les classes CSS correspondantes :

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

Maintenant, lors de l'affichage d'un message "bon" nous donnerons à l'élément la classe "bonne" :

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

Et lors de l'affichage d'un message "mauvais" nous donnerons à l'élément la classe "mauvaise" :

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