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