CSS moderno que deberías estar usando ya
Container queries, cascade layers, :has(), subgrid. El CSS de 2025 tiene capacidades que hace cinco años requerían JavaScript o eran imposibles.
El CSS que aprendiste ya no es todo el CSS
Si aprendiste CSS hace más de cinco años, te has perdido una revolución. Las limitaciones que asumías como inherentes al lenguaje ya no existen.
El navegador ahora puede hacer lo que antes requerían librerías, preprocesadores, o JavaScript.
Container queries
Durante años pedimos poder estilizar componentes basándose en su contenedor, no en el viewport. Finalmente existe.
Un componente de tarjeta puede reorganizarse cuando su contenedor es estrecho, independientemente del tamaño de pantalla. Esto cambia cómo pensamos sobre diseño responsivo.
Ya no diseñas para pantallas. Diseñas componentes verdaderamente modulares que se adaptan a donde vivan.
El selector :has()
El selector padre que CSS nunca tuvo. Ahora puedes seleccionar un elemento basándote en sus hijos o elementos posteriores.
Un formulario puede cambiar de estilo si contiene un input con error. Una tarjeta puede ajustarse si tiene imagen o no. Sin clases adicionales, sin JavaScript.
Cascade layers
La cascada de CSS siempre fue poderosa pero difícil de controlar. Los layers permiten organizar estilos en capas con precedencia explícita.
Puedes definir que los estilos de componentes siempre superen a los de utilidades, o que los overrides de tema tengan prioridad sobre la base. Sin batallas de especificidad.
Subgrid
Grid CSS fue revolucionario. Pero los hijos de un grid item no podían alinearse con las líneas del grid padre. Subgrid resuelve esto.
Ahora puedes tener layouts anidados donde todos los elementos se alinean perfectamente con la cuadrícula principal. Lo que antes requería hacks complejos ahora es una línea.
Variables CSS maduras
Las custom properties llevan años con nosotros, pero su uso ha madurado. No son solo para colores y medidas.
Puedes usarlas para estados de animación, para configurar componentes, para crear sistemas de diseño completos sin preprocesadores.
El coste de no actualizarse
Seguir escribiendo CSS como en 2018 funciona. Pero estás escribiendo más código del necesario, dependiendo de herramientas que ya no hacen falta, y creando soluciones frágiles donde hay robustas.
El CSS moderno no es solo más poderoso. Es más mantenible. Menos código hace lo mismo, y ese código expresa mejor la intención.
Compatibilidad con navegadores
La mayoría de estas características tienen soporte amplio. Container queries, :has(), cascade layers están en todos los navegadores modernos.
El argumento de "no puedo usarlo porque IE" murió hace años. Si tu proyecto soporta navegadores de los últimos dos años, puedes usar casi todo esto.