CSS sin clases
Descubriendo frameworks semánticos y con conciencia de clase
A diario tengo que s̶u̶f̶r̶i̶r̶ trabajar con frameworks de CSS como Bootstrap o Tailwind. No voy a echar tierra sobre ellos porque a fin de cuentas agilizan el montaje de webs y son bastante útiles. Pero esta moda del "atomic CSS", que trata básicamente de convertir todo en clases de utilidad, me empieza a cansar.
Sí, es más ágil para cualquier montaje, pero a la larga tan solo convierten el HTML en una ristra de helpers (con muchos !importants pisándose unos a otros) que tampoco difieren tanto del viejo escribir estilo en línea.
Por ejemplo, comparemos Bootstrap 4...
Hola mundo
... y estilo en línea:
Hola mundo
Pues eso. Prácticamente lo mismo.
Un ejemplo práctico de cabecera con BS4:
Hola mundo!
Soy un framework que se empeña en complicar las cosas sencillas
para obtener algo parecido a esto:
Aparte de tener que escribir y anidar lo más grande, tenemos que tener bien estudiado qué hace cada clase, para que la cabecera no nos salga descuajaringada por los bordes.
Lo más fácil para mí hubiera sido definir todo en la id #cabecera
Pero...
¿no sería más intuitivo hacer todo esto con un simple HTML semántico y que el framework se encargara de darle forma?
Algo como:
Hola mundo!
Soy un framework que no te complica la vida
¡Claro que sí!
La mejor opción para esto, si no quieres armar el tuyo propio, es tirar de un «classless css framework», algo que podríamos traducir como «framework de css sin clases» o framework semántico.
¡Abajo las clases! ¡Viva el HTML semántico!
Un framework semántico de CSS es básicamente una hoja de estilos global que aplica un estilo unificado sobre la totalidad de las etiquetas semánticas de tu HTML.
O dicho de otro modo:
Una hoja de estilos que tunea tu HTML sin que tú necesites engordarlo con 35486826 clases.
Mi favorito es:
Pero hay muchos otros, no estrictamente sin clases, que permiten añadir funcionalidades en puro CSS.
Pico.css
Este es el caso de Pico.css, que con muy pocas líneas de CSS y algo de ingenio resuelve cuestiones tan cruciales como agregar un menú colapsable o un acordeón, componentes básicos para los que cualquier otro framework usaría mínimo jQuery, 3 dependencias de Node.js y otro chorrazo de JS para inicializarlo.
Otros frameworks de CSS que merece la pena probar
Extra
Parece ser que hay algo de animadversión hacia este tipo de frameworks