¿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. SMACSS es una forma de examinar su proceso de diseño y adaptar esos marcos rígidos a un proceso de pensamiento flexible. Es un intento de documentar un enfoque coherente para el desarrollo del sitio cuando se utiliza CSS. Y realmente, ¿quién no está construyendo un sitio con CSS en estos días?

¿Cuáles son estas categorías?

La idea de esta arquitectura es no mezclar código de varias categorías en un solo archivo porque puede ser muy complicado encontrar una línea de código simple para cambiar. La mayor parte del propósito de esta categorización es codificar patrones, cosas que se repiten dentro de nuestro diseño. La repetición resulta en menos código, mantenimiento más fácil y mayor consistencia en la experiencia del usuario.

Base: son los valores predeterminados. Son como el relleno, el margen, el borde, la fuente y otras propiedades, estos valores se utilizan en todo el sitio web y todos los elementos.

Layout: divide una página en secciones con elementos como encabezado, pie de página, página principal, etc. Los diseños mantienen uno o más módulos juntos. A menudo, los desarrolladores muestran elementos de diseño prefijando la clase con l-, p. L-encabezado, l-pie de página.

Modules: 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.

State: 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.

LEER
Pycon Colombia: El Primer encuentro de desarrolladores Python en Colombia

Theme: 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.

Siguiendo estas simples reglas 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; recuerda que su código debe ser escalable y fácil de entender.


Comentarios