Sobre CSS atómico generado automáticamente

“El problema de taquigrafía y escritura larga en CSS atómico” de Robin Weser en un interesante viaje a través de un problema complicado. El punto es que cuando asume el trabajo de convertir algo similar a HTML y CSS en HTML y CSS reales, hay casos extremos de los cuales tendrás que programarte, si es que puedes hacerlo. En este caso, Fela (que acabamos de mencionar) convierte CSS en clases “atómicas”, pero cuando se mezclan taquigrafía y escritura larga, las clases resultantes, mezcladas con la cascada, pueden provocar errores.

Creo que toda esta idea de CSS-in-JS que produce Atomic CSS es bastante interesante, así que demostramos un paso atrás y miremos eso.

CSS atómico significa una clase = un trabajo

Como esto:

.mb-8 {  margin-bottom: 2rem;}

Ahora imagina miles de ellos que están disponibles para usar y pueden hacer casi cualquier cosa que CSS pueda hacer.

¿Por qué harías eso?

Aquí algunas razones:

• Si apuesta por esa idea, significa que enviará menos CSS porque no hay pares de propiedad/valor que se repiten, y no hay nombres de clases inventados por razones de autoría. Supongo que una hoja de estilo totalmente atómica (recortada para su uso, algo que veremos más adelante) tiene un cuarto del tamaño de una hoja de estilo escrita a mano, o más pequeña. Enviar menos CSS es importante porque CSS es un recurso de bloqueo.
• Puedes evitar nombrar cosas.
• Obtendrá cierto grado de coherencia en el diseño “gratis” si limita las clases disponibles.
• Algunas personas simplemente lo prefieren y dicen que los hacen más rápidos.

¿Cómo se obtiene CSS atómico?

No hay nada que le impida hacerlo usted mismo. Eso es lo que hizo GitHub con Primer y Facebook en FB5 ( ¡no es que debas hacer lo que hacen las megacorporaciones! ). Se decidió por un montón de estilos de utilidad y se los enviaron (en gran medida a ellos mismos) como un paquete.

Quizás el creador de toda la idea fue Tachyons, que es simplemente un gran montón de clases obstinadas que puedes aprovechar tal como están.

Pero en su mayor parte…

El viento de cola es el gran jugador.

Tailwind tiene un montón de valores predeterminados agradables, pero tiene algunas cosas muy inteligentes más allá de ser una colección de estilos atómicos:

• Es configurable. Le dices lo que quieres que hagan todas esas clases.
• Le anima a “purgar” las clases no utilizadas. Realmente necesitas hacer esta parte bien, ya que realmente no obtendrás el beneficio de Atomic CSS si no lo haces.
• Tiene una biblioteca de interfaz de usuario para que puedas empezar a moverte de inmediato.

Espera, ¿no estábamos hablando de Atomic CSS generado automáticamente?

Correcto.

Vale la pena mencionar que Yahoo también fue uno de los primeros jugadores en esto. Su gran idea es que esencialmente usarías funciones como nombres de clases (por ejemplo, class="P(20px)") y eso se procesaría en una clase (tanto en HTML como en CSS) durante un paso de compilación. No estoy seguro de qué tan popular se volvió realmente, pero puedes ver que no es muy diferente a Tailwind + PurgeCSS.

Hoy en día, no es necesario escribir Atomic CSS para obtener Atomic CSS. Del artículo de Robin:

Nos permite escribir nuestros estilos de una manera familiar “monolítica”, pero eliminamos Atomic CSS. Esto aumenta la reutilización y reduce el tamaño del paquete CSS final. Cada par propiedad-valor sólo se representa una vez, es decir, en su primera aparición. A partir de ahí, cada vez que volvamos a usar ese par específico, podremos reutilizar el mismo nombre de clase desde un caché. Algunas bibliotecas que hacen eso son:

• Fela
• Styletron
• React Native Web
• Oción
• Hoja de estilo

En mi sincera opinión, creo que esta es la única forma razonable de utilizar Atomic CSS, ya que no afecta la experiencia del desarrollador al escribir estilos. No recomendaría escribir Atomic CSS a mano.

Johan Holmerin también escribió sobre style9 aquí en CSS-Tricks, que hace lo mismo.

Creo que eso es genial. Intenté escribir Atomic CSS directamente varias veces y simplemente no me gusta. ¿Quién sabe por qué? He aprendido muchas cosas nuevas en mi vida y esta simplemente no encaja conmigo. Pero definitivamente me gusta la idea de que las computadoras hagan todo lo que tengan que hacer para mejorar el rendimiento web en producción. Si un paso de compilación convierte mi CSS creado en Atomic CSS… oye, eso es genial. Hay cinco bibliotecas arriba que lo hacen, por lo que el concepto ciertamente tiene fundamento.

Tiene sentido que los enfoques se basan en CSS-in-JS, ya que es absolutamente necesario procesar tanto el marcado como el CSS, por lo que ese es el contexto que tiene más sentido.

¿Qué opinan todos ustedes?