Cómo escribir mejor CSS en equipos con ACSS: una biblioteca dinámica de CSS atómico

Escribir buenas hojas de estilo en cascada (CSS) es difícil y se vuelve más difícil en un equipo donde varios desarrolladores escriben CSS.

A través de este artículo, intento presentarles un enfoque para escribir (o no escribir ... ya veremos) CSS. Este enfoque resuelve casi todos los problemas que uno enfrenta hoy con CSS mal escrito en equipos.

Pero primero, permítanme establecer algunas condiciones básicas en las que mi artículo es válido.

Algunas condiciones que asume este artículo:

  1. Estás trabajando en un equipo donde varios desarrolladores escriben CSS.
  2. Las directrices son difíciles de aplicar a menos que existan herramientas automatizadas.
  3. Los diseñadores son pájaros libres. Los rediseños ocurren.

En estas condiciones, voy a presentar una solución milagrosa que resuelve casi todos los problemas a los que nos enfrentamos debido a un CSS deficiente (recuerde, CSS no es malo. CSS mal escrito sí lo es). Repasemos esos problemas para empezar.

Descargo de responsabilidad : No soy, de ninguna manera, un afiliado de la solución descrita en este artículo. Solo soy un desarrollador que ha sentido el dolor de un CSS deficiente en un equipo y quiere compartir con otros desarrolladores mis pensamientos sobre cómo superar eso. Este artículo puede parecer promocional, pero es solo porque estoy muy emocionado de presentarlo a todos.

Problema n. ° 1: nombrar clases es difícil

Desarrollador 1 (mientras codifica) : me parece un encabezado, permítame usar el .headerselector para ello.

Developer 2 (en la solicitud de extracción) : T suya no es una cabecera. Me parece un título. Además, no podemos llamarlo simplemente 'encabezado' ya que ese elemento no es lo suficientemente genérico. Llamémoslo .panel-headero mejor .panel-title.

Proponer nombres y que también sean nombres significativos es el problema más difícil de resolver. También es el aspecto más difícil de aprender porque no se pueden tener pautas para lo que es un nombre "significativo". Solo puede dar ejemplos de lo que no es significativo y eso solo puede ayudar hasta ahora. Además, no se trata solo de "ser significativo". Las clases en CSS también deben asegurarse de que no entren en conflicto con otros nombres de clase en el futuro, ya que un nuevo desarrollador puede usar el mismo nombre o uno similar para su clase.

Soluciones disponibles:

  • BEM : existen convenciones de nomenclatura como BEM para resolver este problema hasta cierto punto. Pero al final es una guía (todos sabemos lo fácil que es seguir las pautas). Es posible que BEM le impida ir completamente ad-hoc, pero aún debe crear un nombre de clase inicial para sus componentes.
  • Clases atómicas : otro enfoque común en estos días para ir completamente atómico con clases atómicas. Clases pequeñas que hacen una sola cosa. P.ej. Taquiones. Mézclalos y combínalos para obtener lo que necesitas. Este es un buen paso para "omitir los nombres" por completo, pero ¿qué pasa si en el futuro no existe una clase para una cosa en particular? ¿Cómo personalizo las clases atómicas existentes de acuerdo con mi diseño? ¿Todas las clases se cargan siempre en mi página, ya sea que las use o no? Necesitamos algo más.

Problema n. ° 2: fortalezas del selector

Otra cosa que los desarrolladores de CSS deben tener en cuenta es que la especificidad de su CSS no se vuelve loca. Si tiene selectores largos y complejos, su CSS se vuelve impredecible y difícil de mantener y depurar. Harry Roberts ha escrito muchos artículos sobre por qué eso es malo y qué puede hacer para solucionarlo.

Soluciones disponibles:

La mejor solución a este problema es simplemente restringir sus selectores a una clase. Sin encadenamiento, sin anidamiento, sin ID. Los nombres de BEM y las clases atómicas mencionadas anteriormente dan como resultado selectores de clase única en su CSS y, por lo tanto, ayudan a resolver este problema.

Problema n. ° 3: ¿Qué pasa con CSS no utilizado?

CSS bloquea el renderizado, por lo que es muy importante cargar solo el CSS crítico de una página de forma sincrónica y el resto, de forma asincrónica. Por la misma razón, también es importante evitar que su CSS cree inflado eliminando el CSS no utilizado.

Soluciones disponibles:

Muchas herramientas se jactan de extraer el CSS usado de una página. Pero con la llegada de aplicaciones de una sola página, esto se ha vuelto más difícil que nunca. No estoy seguro de cuán confiables o eficientes son, pero eso aún necesita un procesamiento posterior adicional sobre su CSS.

Problema # 4: Refactorización

Desarrollador 1 : Este CSS se ha vuelto bastante complicado. Creo que deberíamos refactorizarlo.

Desarrollador 2 : ¿Crees que este selector que estás modificando también se esté utilizando en la página X? ¿Has comprobado?

Desarrollador 1 : ¡Maldita sea! Tienes razón ... me perdí eso. Esa página X es demasiado crítica para tocarla. ¿Sabes por qué ese desarrollador usó la misma clase en ambas páginas?

Desarrollador 2 : Ni idea. Dejó la empresa. Dejemos el CSS como está :(

No tengo nada más que decir aquí. Ese diálogo lo explica todo.

Si voy a resumir los problemas anteriores, diría que escribir un buen CSS (escalable, legible, mantenible) es definitivamente posible. Sin embargo, hacerlo en un equipo enorme es extremadamente difícil. Incluso si intenta hacerlo bien en un equipo, sería necesario un esfuerzo constante de alguien para hacer cumplir todas las mejores prácticas.

En equipo, la solución menos obvia pero perfecta sería: ¡dejar de escribir CSS!

“Espera, ¿qué estás diciendo? ¡Eso no es posible!". Puede que lo estés pensando, pero déjame presentarte algo.

La solución todo en uno: ACSS (atomizador)

ACSS (derivado de Atomic CSS) es un marco basado en componentes para diseñar a través de clases atómicas desarrollado en Yahoo! Y Atomizer es una herramienta que realmente facilita eso. Te lo explicaré más. Pero antes de eso, déjame mostrarte cómo se diseña en ACSS.

Para seguir los ejemplos de código de este artículo, le sugiero que instale Web Maker (un patio de juegos de front-end que admite la escritura de ACSS sin ninguna configuración de compilación) en el navegador Chrome.

Ahora digamos que tiene un botón que necesita un estilo con las propiedades habituales de relleno, fondo, color, etc. Así es como se vería en ACSS:

 I am a button

Una sugerencia: no haga ningún juicio con la primera mirada a esta sintaxis. Sigue leyendo, dale tiempo, discute y luego decide. Las clases en la buttonetiqueta pueden verse diferentes, pero usted estaría de acuerdo en que se pueden adivinar en gran medida sobre lo que hacen. Es un botón con azul , blanco , 10px , bloque en línea , puntero y se cambia a rojo al pasar el mouse.background-colorcolorpaddingdisplaycursorbackground-color

Si ya ha instalado Web Maker, ábralo haciendo clic en el icono de Web Maker en la parte superior derecha de su navegador Chrome. Pegue el HTML anterior en el panel de código HTML y seleccione Atomic CSS como el modo en el panel de código CSS. Tan pronto como haga esto, verá algo de CSS automático generado en el panel de código CSS, así:

El CSS que ves es generado por la herramienta Atomizer que mencioné anteriormente. Básicamente, lee HTML (o cualquier archivo), detecta las clases ACSS de ellos y genera CSS para esas clases detectadas. ¡Así que escribe solo HTML con las clases apropiadas que desea usar y CSS se genera automáticamente!

Ahora que sabemos cómo se diseña en ACSS, veamos cómo es la mejor metodología CSS que puede tener su equipo.

¿En línea, pero no en línea?

Como puede ver, siempre estamos escribiendo clases en línea en las etiquetas. Eso es lo que quise decir con estilo en línea. Pero no lo confunda con los "estilos en línea" . A diferencia de los estilos en línea, nuestras clases en línea se traducen en clases CSS reales en una hoja de estilo almacenable en caché. Entonces, básicamente, obtenemos el mismo poder que los estilos en línea (escribiendo cosas rápidamente) pero aún obtenemos CSS atómico completamente válido como salida.

¡No más nombres! ?

Mi ventaja favorita absoluta. Nunca tendrás que pensar en un nombre agradable, semántico y sin conflictos para una clase.

Un dicho muy famoso dice:

Solo hay dos cosas difíciles en Ciencias de la Computación: invalidación de caché y nombrar cosas. - Phil Karlton

Actualizaciones y refactorización súper fáciles

Vaya al HTML y cambie las clases para actualizar algunos estilos. Retire cualquier clase de cualquier lugar sin temor a romper nada en otro lugar.

¿No es un byte de CSS no utilizado?

Dado que Atomizer genera CSS a partir de las clases que realmente ha utilizado, nunca tendrá CSS sin utilizar en su hoja de estilo. ¿No es esa la actuación loca que todos hemos estado buscando? También hay una herramienta donde puede verificar cuánto puede beneficiarse un sitio web de ACSS - //atomize-io.herokuapp.com/

¿No hay pautas para nuevos desarrolladores?

Todo lo que necesita para darle a un nuevo desarrollador como parte de su incorporación de CSS es una guía de sintaxis para ACSS y un enlace de referencia de clase: //acss.io/reference. Esta es una página donde puede buscar fácilmente en la clase ACSS cualquier propiedad: valor. Incluso esta convención se incrusta en su memoria a medida que la sigue usando.

Además, hay una pequeña e ingeniosa extensión de Visual Code de Pankaj Parashar que sugiere automáticamente estas clases directamente en el editor. Entonces, incluso la referencia no es necesaria con esa extensión. ¡La incorporación de desarrolladores está lista!

Aparte de estas ventajas, hay varias ventajas más con las que viene ACSS.

  • Por lo general, seguimos usando los mismos pares de propiedad / valor antiguos en una aplicación. Por lo tanto, la hoja de estilo generada esencialmente deja de crecer después de cierto punto . Porque cada par de propiedad / valor único viene una vez en la hoja de estilo final.
  • Debido al punto anterior, en realidad podría usar la misma hoja de estilo en su conjunto de múltiples productos, ya que nunca sería tan grande. ¡La misma hoja de estilo CSS almacenada en caché para todos los productos!
  • Solicitud de extracción que se siente como un sueño. Imagine solicitudes de extracción donde no ve ningún archivo .css. No más clases de comprobación de conflictos de significado o especificidad . Porque sabe que se generaría el CSS atómico correcto, que debería estar presente. ¿No será un país de las maravillas?

Rompiendo mitos

Se han desarrollado muchos mitos con respecto a ACSS en Internet. Esto se debe a una evaluación superficial del marco y al juicio a primera vista.

Es lo mismo que el estilo en línea. ¡Es malo!

No, no es. Ya lo hemos visto arriba. Definitivamente es tan poderoso como el estilo en línea, pero no hereda sus contras.

Es difícil escribir todo ese mismo conjunto de clases una y otra vez.

Sí lo es. ACSS dice que es un marco basado en componentes. Si no está creando una plantilla para cada uno de sus componentes y ya está duplicando HTML, digamos para crear un botón cada vez, ACSS no es para usted.

Por ejemplo, debería crear botones utilizando un componente de botón abstraído como este:

Hello World

que debería compilarse en algo como:

Hello World

Las clases no tienen ningún sentido

Estoy de acuerdo en que son diferentes y pueden parecer repulsivos a primera vista. Pero cada marco de clase atómica viene con su propia convención para nombrar cosas. Y créame, ACSS tiene lo mejor de la convención de nomenclatura. Lea más sobre por qué eligieron ese nombre.

Me gustaría citar un párrafo de uno de los artículos de Harry Robert:

Un argumento común en contra de BEM es que es feo; Me atrevo a decir que si te alejas del código que se basa únicamente en su apariencia, a menudo te estás equivocando. A menos que el código se vuelve innecesariamente difícil de mantener, o realmente más difícil de leer, entonces tal vez usted no tiene que pensar dos veces antes de usarlo, pero si es sólo se ve raro ', pero tiene un propósito válido, entonces definitivamente debe ser considerado plenamente antes descartándolo. - Harry Roberts

Pero aquí estamos, usando BEM para hacer que nuestras bases de código estén cuerdas.

No podré hacer X en ACSS

Se sorprenderá de ver todo lo que es posible con meras clases proporcionadas en ACSS. Pseudo-elementos, flexbox, media queries, lo que sea. ¡Y la convención que se les ocurrió para hacer todas estas cosas es simplemente brillante! Aunque puede haber ciertas cosas que aún no son posibles en ACSS, como CSS Grids, siempre puede abrir un problema o contribuir a Atomizer.

En el final

Le solicitaría que pruebe ACSS si comprende el dolor de escribir y administrar CSS en un equipo. Y recuerde, usar ACSS no significa que no pueda escribir CSS simple. Las herramientas deben usarse donde funcionen mejor. Si hay algo para lo que cree que CSS simple sería más apropiado, definitivamente debería usarlo.

Además, ACSS no es el único que adopta este enfoque. Existen alternativas similares como Blowdry CSS, Cell CSS, etc., cada una con su propio estilo para lograr lo mismo.

Si tiene alguna pregunta sobre ACSS, puede hacer ping a Thierry Koblentz, el hombre mismo del equipo de ACSS, en Twitter. Haga una pregunta en la compilación de preguntas frecuentes que mantiene o únase al grupo Atomizer en Gitter. O pon los comentarios de este artículo.

Finalmente, me gustaría agradecer a Thierry Koblentz y Jitendra Vyas por revisar este artículo.

Si te ha gustado este artículo, demuestra tu amor aplaudiendo ?? en el artículo. También síganme en Twitter, donde comparto más artículos de front-end y proyectos paralelos míos.

Más para leer

  • //www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/ - por Thierry Koblentz
  • Repositorio de GitHub de atomizador - //github.com/acss-io/atomizer
  • Documentación de ACSS: //acss.io/quick-start.html
  • Preguntas frecuentes sobre ACSS compiladas por Thierry - //github.com/thierryk/ACSS-QA
  • Parque infantil ACSS - //webmakerapp.com