Advertisement
  1. Web Design
  2. Sass
Webdesign

La estructuración Sass: Di adiós a la ambigüedad del diseño atómico.

by
Length:ShortLanguages:

Spanish (Español) translation by Rosario (you can also view the original English article)

El diseño atómico es una metodología que describe la estructura de código sensible para las hojas de estilo. Tiene muchos seguidores, pero me parece que sus convenciones de nombres a veces pueden ser ambiguas. ¿Qué es una molécula? ¿Qué es un organismo? ¿Cómo sabemos dónde trazar la línea entre los dos? Estas preguntas particulares parecen ser el mayor obstáculo para interpretar una arquitectura atómica.

Atoms Molecules Organisms Templates and Pages
Átomos, moléculas, organismos, plantillas y páginas

Hoy discutiremos lo que utilizo, las facetas particulares de las convenciones de diseño atómico con las que tengo problemas, lo que he hecho para resolver mis problemas y cómo organizo actualmente Sass utilizando, por ejemplo, el patrón 7-1.

Estructura atómica

"No estamos diseñando páginas, estamos diseñando sistemas de componentes". - Stephen Hay

Me encanta el diseño atómico y sus ideologías, pero descubrí que pueden colapsar cuando se trabaja con miembros del equipo que no están íntimamente familiarizados con cómo funciona todo. En el pasado usé la siguiente estructura de carpetas:

Organización de carpetas: root/css/src/

Dentro de style.scss los parciales de Sass se importan usando gulp-sass-glob-import:

Archivo de índice de importación de Sass: root/css/src/style.scss

El orden con esta configuración importa un poco. Si es necesario ajustar un “átomo”, una “molécula” u “organismo”, las declaraciones hechas en plantillas o páginas anularán las partes mencionadas anteriormente, junto con cualquier otro parcial anterior.

La orden además habilita anulaciones al estilo de un complemento, en caso de que sea necesario (y generalmente lo hace en mi experiencia).

Contenidos del directorio

Gran parte de los contenidos para cada directorio atómico (átomos, moléculas, organismos, plantillas, páginas) contendrán parciales que, en teoría, son fáciles de encontrar y fáciles de administrar cuando sea necesario.

La organización parece sensata si eres sabio con respecto al diseño atómico, pero se queda corto para alguien que no está familiarizado con el enfoque y la nomenclatura. Un desarrollador que no esté al tanto del Diseño Atómico no entenderá el hecho de que una forma de búsqueda reside en el directorio molecules, y puede iniciar la búsqueda en otras áreas para realizar ediciones, o simplemente frustrarse y crear un nuevo archivo; lo he visto suceder.

Una estructura de componentes

En el momento de escribir este artículo, adopto un enfoque que contempla elementos como componentes, como bloques lego, creando así una facilidad de uso para todos los involucrados en el código base. Echa un vistazo a la siguiente estructura de directorios:

Espero que puedas ver en este ejemplo que es bastante intuitivo reunir el propósito de cada carpeta (con la excepción de la caja de herramientas). "Caja de herramientas" es un lugar para almacenar ayudantes no relacionados con las utilidades, como clases personalizadas para diseños y patrones de objetos, animaciones de fotogramas clave personalizados, etc. Estos elementos de la caja de herramientas, para mí, por lo general terminan como partes que puedo anular o desear en el futuro, y por qué se importan antes del directorio de componentes.

En esta etapa, los parciales se cargan en el índice de estilos así:

Los “Componentes” contendrán partes de la interfaz de usuario como botones, entradas, logotipos, avatares, encabezados, pies de página, formularios e incluso módulos como la navegación. Los componentes pueden ser cualquier cosa, siempre que hagan una cosa y solo una cosa, reutilizables, reutilizados en todo el proyecto y, lo que es más importante, independientes; no es una mala definición para ser entendida universalmente si me preguntas. Este enfoque particular también implementa varias ideas de SMACSS (estados) y Diseño atómico (plantillas, llamadas diseño en este ejemplo, y páginas).

En cuanto a la forma de encontrar, es mucho más fácil localizar el directorio de componentes y encontrar la parte de la interfaz correlativa que un desarrollador puede estar rastreando; por ejemplo:

Esencialmente, los componentes son una ventanilla única. El diseño atómico podría funcionar perfectamente para un equipo de uno, o incluso un equipo que sea íntimamente familiar, pero dentro de un equipo más grande se puede sentir la frustración.

Conclusión

El diseño atómico puede usarse absolutamente para mantener un estilo mínimo en los elementos con el fin de crear componentes de interfaz significativos y reutilizables. Pero puedes encontrar ciertos aspectos confusos. Decide por ti mismo qué funciona mejor para ti y saca conclusiones de eso. Al igual que con todo, esta es solo mi experiencia y otros pueden tener una postura diferente.

Me encantaría saber cómo abordan este escenario, así que avísenme en los comentarios. ¡Feliz codificación a todos!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.