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