OmbuShop Crea Tu Tienda Online

CSS Atómico con SASS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

¿Cómo mejorar la organización de código y archivos CSS siguiendo el paradigma orientado a objetos?

Hablamos en posts anteriores acerca de CSS Orientado a Objetos  —una manera de organizar el código CSS— y de pre-procesadores, haciendo especial hincapié en SASS —una tecnología que extiende las posibilidades del CSS estándar—.

Además de una organización del código que entiende a los elementos de diseño como objetos, la posibilidad de fragmentar el código en diferentes archivos nos presenta un nuevo desafío. ¿Con qué criterio hacer esta división? ¿Cómo optimizar los tiempos de mantenimiento a futuro?

Diseño Atómico

En su artículo Atomic Design, Brad Frost nos propone una manera posible de entender el diseño de un sitio web.

La idea se basa en comprender al diseño web como la confección de sistemas de diseño, antes que páginas diseñadas. Brad Frost entiende a cada página web como un conjunto de organismos que interactúan entre sí, a su vez conformados por unidades más pequeñas.

Guiado por esta mirada particular, decide utilizar la metáfora de la química molecular para la organización de organismos, aprovechando la posibilidad de SASS de separar el código en distintos archivos. Plantea 5 carpetas organizadoras:

  1. Átomos
  2. Moléculas
  3. Organismos
  4. Plantillas
  5. Páginas

Inspirado en esta idea, Robin Rendle realiza algunas modificaciones sobre este modelo, continuando la misma lógica.

Robin realiza una división distinta, acorde a su flujo de trabajo y expone la siguiente variación:

  1. Utilidades
  2. Quarks
  3. Átomos
  4. Moléculas

Como verán, la idea es la misma, con algunos cambios de acuerdo a su gusto y mecánica de trabajo.

OmbuShop’s way

También en OmbuShop estuvimos trabajando con una visión orientada a objetos para el manejo de CSS, y comenzamos a utilizar un ordenamiento atómico propio para nuestras hojas de estilo SASS.

Nuestra síntesis incorpora elementos de ambas variaciones, a saber:

  1. Utilidades (utilities)
  2. Quarks
  3. Átomos (atoms)
  4. Moléculas (molecules)
  5. Páginas (pages)
  6. Vendor

¿Qué incluimos en cada una?

A continuación, una breve descripción de qué fragmentos del diseño se corresponden por cada una.

Por lo general, escribimos en inglés lo relacionado con código, por lo que listaré las carpetas in english. Asímismo, incluimos números al comienzo del nombre de cada carpeta, de forma que siempre se mantengan ordenadas de menor a mayor complejidad.

1. utilities

En esta carpeta incluiremos código genérico que será utilizado por los demás archivos. Definición de variables, mixins, el código básico para el body, grillas para el layout, etc.

2. quarks

Aquí estará el código que da estilo a unidades mínimas: cuestiones tipográficas como párrafos, títulos, listas, links, etc.

Por lo general los selectores en este nivel se refieren a etiquetas de HTML de forma genérica.

3. atoms

En este nivel los elementos diseñados empiezan a ganar complejidad.

Se trata de estilar elementos pequeños pero específicos: botones, formularios, elementos tipográficos más complejos, etc.

4. molecules

Las moléculas son elementos de mayor complejidad, conformados por unidades más pequeñas.

Algunos ejemplos pueden ser un cuadro de diálogo, una botonera de navegación o el footer de un sitio.

En este caso, cada archivo podría tener varios elementos (que son los constitutivos de la molécula total. Aquí es imprescindible hacer uso de la capacidad de nesting de SASS, si queremos mantener ese diseño encapsulado sin afectar a terceros.

5. pages

En este nivel se puede incluir código particular que afecta y varía el diseño de una página a otra de un sitio.

Cuando se trata de una modificación transversal, que incluso puede afectar a las moléculas anteriores.

Un cambio de paleta cromática de acuerdo a la sección del sitio, por ejemplo.

6. vendor

Siempre es útil reservar una carpeta con archivos SASS y CSS que sean de terceros. Por ejemplo librerías que han sido descargadas, frameworks, grillas, etc.

Si utilizas bootstrap, por ejemplo, puedes crear una carpeta bootstrap dentro de vendor.

Moraleja

Conviene tener un archivo SASS por fuera de estas carpetas, que se encargue de importar cada uno de los archivos que está en su interior, algo así:


// Vendor
@import "vendor/bootstrap/bootstrap";

// 1-UTILITIES
@import "1-utilities/variables";
@import "1-utilities/basic";
@import "1-utilities/grid";

// 2-QUARKS
@import "2-quarks/typography";
@import "2-quarks/links";
@import "2-quarks/icons";

// 3-ATOMS
@import "3-atoms/buttons";
@import "3-atoms/forms";

// 4-MOLECULES
@import "4-molecules/header";
@import "4-molecules/footer";
@import "4-molecules/floors";
@import "4-molecules/quotes";
@import "4-molecules/popups";

// 5-PAGES
@import "5-pages/contact_page";

See the Pen DEquG by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Dominado el lenguaje CSS para el estilado de sitios web y habiendo comenzado a utilizar pre-procesadores, la preocupación principal de todo frontender profesional actual es cómo organizar el código para que sea future-proof y de fácil mantenimiento.

¡A darle átomos!

Tags: , ,