Estilización con clases en JavaScript

Estilizar elementos a través del atributo style a veces es conveniente, pero la mayoría de las veces no es la mejor idea. El problema es que los estilos estarán dispersos por el archivo JavaScript y será laborioso cambiarlos. Es mucho más conveniente definir estilos en archivos CSS para que se puedan cambiar fácilmente, sin tener que buscar en el código JavaScript.

Por ejemplo, supongamos que tenemos un elemento que muestra un mensaje. El mensaje puede ser "bueno" y mostrarse en color verde, o "malo" y mostrarse en color rojo. La mejor solución en este caso sería crear las correspondientes clases CSS:

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

Ahora, al mostrar un mensaje "bueno", le daremos al elemento la clase "buena":

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

Y al mostrar un mensaje "malo", le daremos al elemento la clase "mala":

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