¿Qué es SMACSS y cómo usarlo?

¿Qué es SMACSS?

Smacss (Scalable and Modular Architecture for CSS o Arquitectura escalable y modular para CSS en español) es una guía de estilo que sigue cinco categorías simples, a fin de examinar, documentar y adaptar el proceso de diseño de un sitio web.  

Categorías de SMACSS

La idea de esta arquitectura no es mezclar código de varias categorías en un solo archivo. E l propósito de esta categorización es codificar patrones, lo que se repite dentro de nuestro diseño.

La repetición significa menos código, mayor consistencia en la experiencia del usuario y facilidad en el mantenimiento. 

 

1. Fondo: 

Son los valores predeterminados y empleados en todo el sitio web, como por ejemplo, el relleno, el borde, la fuente, la margen y otras propiedades. 

2. Diseño:

Los diseños mantienen uno o más módulos juntos. Dividen una página en secciones con elementos como encabezado, pie de página, página principal, etc.

A menudo los desarrolladores muestran elementos de diseño prefijando la clase con l-, p. L-encabezado, l-pie de página.

3. Modulo:

Son las partes reutilizables y modulares de nuestro diseño, como la barra de navegación, la barra lateral y algunos elementos que se repiten en el sitio.

4. Estado:

Son formas de describir cómo se verán nuestros módulos o diseños cuando estén en un estado particular (por ejemplo, activo, inactivo, expandido, oculto). Estos tienen el prefijo is-, p. está activo, está inactivo, está expandido, está oculto.

5. Tema:

Las reglas de tema son similares a las reglas de estado en que describen cómo podrían verse los módulos o diseños. Es más aplicable para sitios más grandes con elementos compartidos que se ven diferentes en todas partes.

Conclusión: 

Siguiendo estas reglas simples puede ordenar sus archivos fácilmente. Cuando necesite encontrar una línea o un archivo, será más fácil porque sabe dónde está y no perderá demasiado tiempo.

Además, al trabajar con un equipo, será más fácil de entender el CSS y no tendrán problemas con el código.

Recuerde que su código debe ser escalable y fácil de entender.