Puntos clave
- Reemplazar JavaScript con CSS a menudo reubica la complejidad en lugar de eliminarla.
- Usa el CSS moderno de forma agresiva para el diseño y la presentación, y de forma conservadora para el comportamiento.
- La capacidad de descubrimiento y de prueba importan más que el diff más pequeño posible.
- Las consultas de contenedor y las animaciones basadas en scroll son ganancias casi universales; la lógica de estado no lo es.
- El objetivo es una base de código que un desconocido pueda entender en un año, no solo un código más corto hoy.
Cada pocos meses llega a los navegadores un nuevo conjunto de funciones de CSS, y el mensaje siempre es el mismo: elimina tu JavaScript, deja que la plataforma haga el trabajo. Consultas de contenedor, :has(), animaciones basadas en scroll, anidamiento: el conjunto de herramientas del CSS moderno es realmente potente. Pero hay una verdad más silenciosa que los equipos descubren solo después de publicar: simplificar un único componente puede hacer que toda la aplicación sea más difícil de entender. La pregunta real no es si puedes reemplazar JavaScript con CSS. Es si la compensación realmente vale la pena para tu producto y tu equipo.
El coste oculto de "menos código"
Cuando cambias un controlador de eventos de JavaScript por una solución solo con CSS, no estás eliminando lógica, la estás reubicando. Un conmutador de mostrar/ocultar construido con :has() y una casilla de verificación es elegante y sin dependencias. Pero seis meses después, un desarrollador que depure esa interacción buscará en el JavaScript, no encontrará nada y perderá veinte minutos antes de darse cuenta de que el comportamiento vive en un selector enterrado en una hoja de estilos.
Esta es la tensión central que saca a la luz el trabajo reciente de Smashing Magazine sobre el CSS moderno: la lógica dividida entre CSS y JavaScript aumenta la superficie cognitiva de tu base de código. Menos líneas, más lugares donde mirar. Para un proyecto en solitario, eso no es un problema. Para un equipo de ocho personas que rotan por la base de código, es un impuesto que se paga en cada cambio futuro.
Un marco para decidir
En Evocative no preguntamos "¿es esta la forma moderna?". Preguntamos si la complejidad migra o desaparece. Usa estas preguntas antes de recurrir a un patrón solo con CSS:
- ¿La lógica pertenece a la presentación? Una revelación al pasar el cursor, un encabezado fijo, un cambio de diseño responsivo: eso es presentación. El estado que afecta a los datos, la analítica o las reglas de negocio no lo es, y debe permanecer en JavaScript.
- ¿Se puede descubrir el comportamiento? Si un nuevo desarrollador no puede predecir dónde vive la lógica, documéntalo o reconsidéralo. La capacidad de descubrimiento supera a la elegancia.
- ¿Es comprobable? Las interacciones de JavaScript son sencillas de cubrir con pruebas unitarias y de integración. El comportamiento puramente con CSS a menudo necesita herramientas de regresión visual que quizá no tengas.
- ¿Se degrada con elegancia? Las funciones de CSS moderno tienen un soporte desigual. Conoce tu solución de respaldo antes de publicar, no después de un ticket de soporte.
Dónde gana claramente el CSS moderno
Muchas migraciones son pura ganancia. Reemplazar un detector de redimensionamiento de JavaScript por consultas de contenedor elimina un coste real en tiempo de ejecución y toda una categoría de errores. Las animaciones basadas en scroll que antes requerían la infraestructura de IntersectionObserver se vuelven declarativas y eficientes. Un diseño que se adapta sin JavaScript es casi siempre más robusto, porque sobrevive cuando los scripts no se cargan. La regla general: si la función permite que el navegador haga algo para lo que está optimizado de forma nativa, la complejidad realmente desaparece en lugar de desplazarse.
El paralelismo con la IA en el diseño
Hay un eco sorprendente aquí con la conversación que está ocurriendo ahora mismo en todo el ámbito de la UX. Así como la IA está reconfigurando el proceso de diseño —automatizando el centro mientras reconfigura dónde se sitúa el juicio humano—, el CSS moderno reconfigura dónde vive la lógica del front-end. En ambos casos el peligro es el mismo: las herramientas que reducen el esfuerzo visible pueden eliminar silenciosamente el contexto que los humanos necesitan para mantener el control. "Humano en el bucle" en diseño significa mantener a las personas capaces de razonar sobre el sistema. El equivalente en el front-end es mantener a tu equipo capaz de razonar sobre el código. La comodidad que erosiona la comprensión es un pasivo a largo plazo disfrazado de ganancia a corto plazo.
Cómo lo abordamos en Evocative
Nuestra regla es simple: adoptar el CSS moderno de forma agresiva para la presentación y el diseño, y de forma conservadora para el comportamiento. Migramos en pasos pequeños y reversibles, documentamos cualquier interacción no obvia impulsada por CSS directamente en el componente y tratamos el soporte del navegador como una decisión de producto, no como una preferencia del desarrollador. El objetivo nunca es el diff más pequeño, es la base de código que un desconocido podría retomar en un año y entender sin un mapa.
El CSS moderno es una de las mejores cosas que le ha ocurrido al front-end en una década. Pero hacer tu código más corto y hacer tu producto mantenible no son el mismo objetivo. Los equipos que ganan son los que conocen la diferencia antes de refactorizar, no después.
Fuentes
- Los usuarios sintéticos me están haciendo replantear la "investigación imperfecta" — UX Collective
- La IA está vaciando el centro del diseño, dejando atrás un reloj de arena — UX Collective
- Humano en el bucle significa asegurarse de que el humano no quede fuera del bucle — UX Collective
- El ajuste de cuentas de la IA en la UX llevaba 20 años gestándose — UX Collective
- El CSS moderno podría hacer tu front-end más complejo — Smashing Magazine
