Una forma diferente de estructurar tu CSS: Atomic Design

Las normas sobre theming y web layout han evolucionado rápidamente en la última década, tratando de mantener el paso con el desarrollo al cual se ha visto sujeto CSS y HTML desde sus raíces como lenguajes concebidos para contenido puramente estático, para adaptarse a páginas dinámicas y responsivas.

Aunque se ha dado un crecimiento notable de múltiples herramientas en los últimos años, con el objetivo de agilizar el desarrollo web en los equipos de trabajo (y vale la pena mencionar aquí frameworks como Sass, Susy y Compass, los cuales usamos actualmente en Rootstack), también es cierto que CSS suele prestarse a enormes páginas de presentación compartidas entre todo el equipo de trabajo y, debido a una falta de estructuración y organización adecuada, se termina con líneas y líneas de código repetidas con tal de evitar la modificación de clases y selectores crípticos ya hechos para no “dañar la página”, sin ser capaces de reciclar diseño existente sin tener que modificar código previamente escrito e igual de críptico.

Es por eso que, al trabajar en un proyecto, es importante definir normas claras e intuitivas sobre cómo estructurar el código CSS. Hay varias metodologías que han surgido, como OOCSS o SMACSS. Sin embargo, hace un año surgió una interesante propuesta que no solo plantea un diseño intuitivo y fácil de leer, sino que además es fácil de explicar y entender: Atomic Web Design.

¿En qué consiste el Atomic Web Design?

Descrito por Brad Frost en su blog, el Atomic Web Design es una metodología de diseño web que toma nota de OOCSS e inspirada en la química, en la cual Frost replantea la estructuración por componentes reusables con clases semánticas a la cual la mayoría de los diseñadores estamos acostumbrados (e.j. .widget o .media que podamos definir en nuestros temas) y sugiere que partamos desde la unidad más pequeña e indivisible, o atómica, en nuestro diseño: inputs, labels, botones, otros HTML tags que vayamos a usar, incluso elementos más abstractos como paletas de colores, fonts y hasta animaciones.

Una vez que se hayan definido todos los “átomos” a usar, entonces se pasa a estructurar las moléculas o bien la creación de componentes sencillos, generalmente con un uso específico en nuestra página y posiblemente reutilizable. Por ejemplo, la unión de un “átomo” de label, un “átomo” de input, un “átomo” de button, un “átomo” de un color específico y un “átomo” de font, pueden unirse para crear una “molécula” de barra de búsqueda. Así es cómo, según lo explica Frost, podemos eventualmente definir organismos (regiones definidas de una página) y eventualmente, plantillas y páginas.

La teoría que sigue el Atomic Design es que, al empezar desde el elemento más pequeño, podemos ir construyendo de forma sistemática componentes más grandes y complejos sin recurrir a la necesidad de repetir código y, por ende, tener una hoja de presentación más fácil de manejar y mantener. También es interesante mencionar que el Atomic Design tiene una excelente sinergia con Sass y Scss, aprovechando sus poderosas funcionalidades de extensión y herencia para construir moléculas y componentes más grandes de forma fácil y rápida. De hecho, ya existen frameworks basados en Atomic Design, como Pattern Lab.

Definitivamente, la metodología de Atomic Design puede parecer desalentadora y, para algunos, difícil de implementar en su estructura de diseño; sin embargo, mantiene una premisa muy funcional y fácil de entender. En mi siguiente blog, veremos cómo implementar Pattern Lab en nuestro proyecto para adoptar el Atomic Design y primeras impresiones sobre el framework.

Te recomendamos en video