Snippets de código CSS moderno: dejemos de escribir CSS como si siguiéramos en 2015

• Una colección de código que muestra lado a lado técnicas de hacks de CSS obsoletas y la sintaxis nativa moderna de CSS que las reemplaza
• Aprovecha estándares modernos como Grid, Flexbox, colores OKLCH, container query y scroll-timeline para reducir la dependencia de JavaScript
• Está organizado por temas como color, layout, animación, selectores, tipografía y flujo de trabajo, y presenta alternativas modernas para cada función
• Con los estándares más recientes de CSS, permite reducir la dependencia de JS, Sass y bibliotecas externas y aprovechar al máximo las funciones nativas del navegador

[GN⁺]

Opiniones de Hacker News

• CSS en 2025 se siente como decir “volvamos a escribir estilos inline como en 2005” directamente en HTML
  Están hablando de Tailwind, pero al final termina ignorando la separación entre formato y presentación

  • El mito más antiguo del desarrollo web es el concepto de “separación de responsabilidades”
  • HTML y CSS solo están separados como tecnologías
    Si HTML realmente se encargara solo del contenido y CSS solo del estilo, no haría falta crear div soup como .container-wrapper .container .container-inner
    El hecho de que haya que modificar el HTML cada vez que cambia el layout es la prueba de ello
  • No hace falta ofuscar el código, solo usa Tailwind
  • De hecho, creo que eso es mejor
    El código relacionado con el componente queda reunido en un solo lugar y no hace falta ir saltando entre archivos
  • Me parece una buena idea
    El layout y el estilo son partes inseparables de la UI
    HTML no es contenido, es layout
    Incluso si uno cree firmemente en la separación de responsabilidades, HTML y CSS pertenecen a la misma capa de presentación
    Creer que se pueden separar es como darle la espalda a la realidad

• Hice una lista de las principales mejoras recientes de CSS

  1. Selectores anidados (nested selectors)
  2. :has(...)
  3. :is(...) — antes había que usar trucos como :not(:not(...))
  4. :where(...) — parecido a :is(...), pero con peso de selector en 0, así que sirve mucho cuando usas selectores complejos
  • Coincido mucho con el punto #1
    La mayoría de los LLM no conocen esta función
    Recomiendo agregar ejemplos en AGENTS.md
    Vale la pena consultar la documentación de MDN sobre Nesting Selector
    Con el selector & puedes lograr mejor legibilidad y menos duplicación al mismo tiempo
  • Mi favorita es text-box: trim
    Después de 20 años explicándoles a los diseñadores que alinear la parte superior de las mayúsculas era imposible, por fin me siento libre
  • Personalmente, lo que más me gusta es @layer
  • Los puntos 2~4 están bien, pero no me gustan los selectores anidados porque no se pueden buscar con grep

• Algunos ejemplos funcionan con el método viejo en todos los navegadores, pero el método nuevo solo funciona en Chrome/Edge
  Me parece irresponsable incluir ejemplos así porque refuerzan el monopolio de Blink

  • De acuerdo. Estaría bien que el filtro predeterminado fuera “newly available” e incluyera los tres navegadores principales (Chrome/Edge, Safari y Firefox)
  • No es culpa del sitio
    Más bien habría que señalar la falta de cumplimiento de estándares de Mozilla

• Hay que dejar de fijar elementos en los bordes de la pantalla
  En algunos sitios, más de la mitad de la pantalla la ocupan elementos estáticos
  Lo natural es dejar que el contenido se desplace

• Irónicamente, ese sitio tiene el modo oscuro fijo y no usa prefers-color-scheme

• Uno ve “¡qué buenos ejemplos creativos de CSS!”, pero luego el soporte del navegador ronda el 40~50%, así que hay limitaciones reales

  • Antes esta falta de soporte era un gran problema, pero ahora ha mejorado mucho
    En parte gracias a la influencia excesiva de Chromium, pero aun así el resultado es positivo
    Ver Interop 2025
  • Si cambias el filtro de ejemplos a “widely available”, la tasa de soporte sube bastante
  • Solo toma tiempo
    Los vendors de navegadores están agregando funciones por adelantado para lograr soporte amplio tarde o temprano

• Confunde que algunos ejemplos aparezcan como no compatibles con Firefox, pero en las demos reales sí funcionen
  Me pregunto si les habrán aplicado algún polyfill

  • La etiqueta dice “Limited availability”
    El porcentaje verde en la esquina inferior izquierda indica la proporción de usuarios de navegadores que soportan esa función
    Muchas veces es menos de la mitad
    Al final, más que “modern CSS”, se parece a latest Chrome CSS
  • El etiquetado de compatibilidad está hecho un desastre
    Por ejemplo, sibling-index() todavía no funciona en Firefox, pero aparece marcado como “widely available”

• Últimamente me confunde qué debería usar entre Tailwind, CSS-in-JS, Sass/SCSS y Vanilla CSS

  • No hay una respuesta correcta
    Usa lo que le funcione a tu equipo
    Si Tailwind les sirve, usen eso; si es un proyecto personal, CSS inline; si ya dominan Sass, sigan con eso;
    y si quieren ir con todo a CSS moderno, también es una gran elección

• Llevo tanto tiempo en desarrollo web que incluso muchos de los ejemplos que llaman “método antiguo” tienen funciones que estoy viendo por primera vez

• Era la primera vez que veía la función para ajustar el brillo del color
  Antes lo implementaba con Sass y Compass, pero mantener ese toolchain era una molestia
  Ahora que CSS lo soporta por sí mismo, es mucho más práctico