Estilos desde JavaScript: style, clases y variables CSS

JavaScript puede pintar cualquier elemento directamente… y justo por eso hay que saber cuándo NO hacerlo. Hoy aprendes las tres vías — style directo, clases, y variables CSS — y la regla profesional que decide cuál usar: el CSS describe los estados, JavaScript solo decide cuál está activo.

element.style: pintar a mano

Dos detalles con historia: las propiedades con guion se escriben camelCase (background-color → backgroundColor, la misma conversión de dataset), y elemento.style solo VE los estilos inline — para saber cómo quedó algo después de toda la cascada, getComputedStyle.

La regla profesional: JS decide, CSS describe

Si mañana el rojo de alerta cambia a naranja, ¿quieres buscarlo en tu JavaScript o en tu CSS? Los estilos viven en CSS; JavaScript solo declara ESTADOS con clases — exactamente el classList de la lección pasada:

// ✗ frágil: el diseño quedó enterrado en la lógica
alerta.style.backgroundColor = "#7f1d1d";
alerta.style.fontWeight = "700";

// ✓ profesional: .excedido ya existe en el CSS, JS solo lo activa
alerta.classList.add("excedido");

¿Entonces element.style no sirve? Sirve para UNA cosa: valores que se calculan en ejecución y no pueden estar en ningún catálogo. Y ahí la forma más limpia no es ni siquiera style.width — es una variable CSS.

La perilla: variables CSS + setProperty

Del supercurso de maquetación conoces las variables CSS. Míralas cerrar el círculo: el CSS define CÓMO se usa el valor, JavaScript solo lo actualiza:

Cambia gastado y mira la barra obedecer. Fíjate en el reparto de poderes: el ancho, el color, el redondeo y hasta la transición viven en CSS (con su prefers-reduced-motion, innegociable desde maquetación); JavaScript solo calculó un número y giró la perilla --avance. Cada lenguaje en su cancha.

Mini-reto

Extiende la barra de presupuesto: 1) define en el CSS una clase .excedido que pinte el relleno de rojo (#ef4444); 2) en JS, si gastado > presupuesto, agrégala con classList.add y limita --avance a "100%" con Math.min; 3) prueba con gastado = 620000. Decisión en JS, diseño en CSS — como los grandes.

Qué sigue

Ya creas, vistes y pintas elementos. Falta la lección de eficiencia: ¿qué pasa si insertas 500 elementos uno por uno? El navegador sufre — y hay un patrón para evitarlo. Próxima parada: fragmentos y rendimiento, el cierre teórico del módulo antes del reto.