L'inconvénient des classes en JavaScript

Supposons que nous ayons plusieurs classes pour styliser les messages :

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

Supposons que dans un certain élément, nous ayons affiché un message de succès et lui ayons attribué la classe correspondante pour le succès :

javascriptelem.classList.add('success');

Supposons maintenant que dans ce même élément nous affichons un message d'erreur et lui attribuons la classe correspondante pour l'erreur :

javascriptelem.classList.add('error');

Il en résultera que l'élément aura deux classes en conflit l'une avec l'autre :

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

Il apparaît donc qu'avant d'ajouter une nouvelle classe, nous devons d'abord supprimer la précédente :

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

Ce n'est pas très pratique, car nous pouvons ne pas savoir quelle était exactement la classe précédente et nous devrons supprimer toutes les classes une par une :

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