Rant sobre CSS
Traducido por IA desde el original en inglés.
Publicado originalmente como hilo en Twitter.
La gente pregunta: “¿qué tiene de malo CSS?”. ¿Por qué se inventan cosas para evitar escribir CSS directo? ¿Por qué css-in-js? ¿Por qué Tailwind? ¿Por qué no abrazar la cascada como fue pensada?
Bueno, hay varias cosas que en CSS crudo no son ideales. Vamos.
Carencias de CSS
CSS viene de cuando la web era sobre todo documentos, no apps. Ponías algunos estilos globales, unas cuantas clases, dejabas que la cascada hiciera lo suyo y listo. Hoy ese enfoque queda corto. Casi todo necesita estilo, y globales + cascada no escalan bien.
Nombrar cosas
Tener que nombrar absolutamente cada cosa que quieres estilizar es agotador.
¿No era que nombrar cosas es una de las tareas más difíciles en programación? Ahora imagina hacerlo para cada rincón del markup, solo para poder darle estilo. 😩
La cascada
Ya lo mencioné antes. Buena idea para documentos. No tanto para apps. Hoy tenemos mejores formas de reutilizar y mantener consistencia. Incluso tenemos variables nativas de CSS.
No me malinterpretes: es una buena feature. Pero se vuelve problemática cuando se sobreusa. Y no juega bien con arquitecturas basadas en componentes.
La naturaleza permisiva de CSS
Gracias, pero no gracias.
Quiero que mi CSS me grite si tipeo mal algo que rompe la experiencia de usuario. Hoy tenemos herramientas de build para esto. Quiero que falle el build si uso una variable CSS que no existe.
La naturaleza global de CSS
Otra idea razonable para documentos simples de otra época. En apps no escala. No por nada la mayoría de frameworks tienen estilos scopeados por componente.
¿Qué podemos hacer?
Estos son solo los problemas que se me ocurren de inmediato. No soy experto ni he pensado esto al extremo. Es simplemente experiencia diaria trabajando con CSS. Llámame torpe si quieres por no haber “dominado” CSS como supuestamente debe usarse.
Saquémonos la idea de que CSS tiene que escribirse y cuidarse completamente a mano. CSS puede ser perfectamente un target de compilación. Está bien usar herramientas de mayor nivel que generen el CSS de bajo nivel que enviamos al navegador.
Herramientas como css-in-js y Tailwind son formas de lidiar mejor con estas carencias. Tienen trade-offs, sí. Pero, ¿qué decisión no los tiene? Todo es trade-off.