La estructuración de Sass decir adiós a la ambigüedad del diseño atómico

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. 

Átomos, moléculas, organismos, plantillas y páginas

Hoy analizaremos 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..

Nota del editor

Brad Frost, autor de Diseño atómico, ha aclarado el hecho de que sus metodologías en realidad no dictan ninguna estructura CSS. En su lugar, ofrece un modelo mental para pensar en construir interfaces de usuario. Lo siento brad!

Estructura atomica

"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 la carpeta: raíz / css / src /

 - vars - funciones - mixins - base - plugins - tipografía - átomos - moléculas - organismos - plantillas - páginas - estados - utilidad style.scss

Dentro estilo.scss Los parciales de Sass se importan usando gulp-sass-glob-import:

Archivo Sass Import Index: root / css / src / style.scss

// Config @import "vars / *"; @import "funciones / *"; @import "mixins / *"; // Bower Components @import "… / bower_components / normalize-scss / _normalize"; // Estilos generales de selector de DOM @import "base / *"; // Fonts & General Type Styling @import "typography / *"; // Complementos de terceros @import "plugins / *"; // Diseño atómico @import "atomos / ** / *"; @importar "moléculas / ** / *"; Importación "organismos / ** / *"; @import "templates / ** / *"; @import "pages / ** / *"; // Variaciones a través de eventos @import "states / *"; // General UI Helpers @import "utility / *";

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

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 de 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.

 - átomos - _buttons.scss - _links.scss - _inputs.scss - moléculas - _navigation.scss - _search-form.scss - _contact-form.scss - organismos - _header.scss - _footer.scss - _content.scss - templates - _sticky- footer.scss - _grid-2column.scss - _grid-3column.scss - páginas - _home.scss - _about.scss - _contact.scss

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 tenga conocimiento de Diseño Atómico no tendrá en cuenta el hecho de que una forma de búsqueda reside dentro del moléculas directorio, 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. Eche un vistazo a la siguiente estructura de directorios:

 - vars - funciones - mixins - base - tipografía - complementos - caja de herramientas - componentes - diseño - páginas - estados - utilidad style.scss

Esperamos que pueda 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ía 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í:

// Config @import "vars / ** / **"; @import "funciones / *"; @import "mixins / *"; // UI @import "... / bower_components / normalize-scss / _normalize"; @import "base / *"; // estilo general utilizando selectores de elementos DOM @import "typography / *"; @import "plugins / ** / *"; // Complementos de terceros @import "toolbox / ** / *"; // Ayudantes no de utilidad @import "components / ** / *"; // lego blocks @import "layout / ** / *"; @import "pages / ** / *"; @import "estados / ** / *"; @import "utility / ** / *";

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 el diseño atómico (Plantillas llamadas diseño en este ejemplo y páginas).

En términos de búsqueda, 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:

 - componentes - _buttons.scss - _navigation.scss - _masthead.scss - _footer.scss - _logo.scss - _avatar.scss - _contact-form.scss - _sales-calculator.scss

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 codificando a todos!