SMACSS: guía para CSS modular y escalable

10min

CSS es un lenguaje sencillo, no lo ponemos en duda, pero  lo que no es tan fácil es desarrollar el código CSS de un proyecto grande, de manera escalable y modular. Si alguna vez has participado en un proyecto de envergadura, o uno que comenzó de manera elemental pero que fue ampliando y ampliando su funcionalidad, habrás observado que organizar el código CSS es mucho más difícil que simplemente dar estilos a los elementos de la página. Es por ello que han aparecido diversas metodologías y enfoques de trabajo para las CSS, como la que vamos a abordar en este post: SMACSS. 

Índice

¿Qué es SMACSS y por qué es importante para el desarrollo web?

SMACSS son las siglas de Scalable and Modular Architecture for CSS una metodología que permite organizar el CSS de manera modular y escalable, mejorando la mantenibilidad y el trabajo en equipo. 

En proyectos grandes, donde los estilos suelen crecer y crecer, SMACSS ayuda a reducir la complejidad y a mantener el código legible y organizado, además de consistente a lo largo de todo el proyecto y todas las prácticas de los desarrolladores.

Principios fundamentales de SMACSS

SMACSS propone una serie de principios que tratan de dar sentido y orden a cada uno de los estilos que pueden formar parte de un proyecto. Vamos a ver cuáles son:

Base

La «Base» incluye reglas globales o reinicios de estilo que afectan directamente a elementos HTML estándar, como «body», «h1», «a», etc.  Estas reglas sirven para crear una forma estándar para todo el proyecto, de modo común, lo que permite crecer de manera uniforme. Por ejemplo, puedes definir una tipografía o un esquema de color, espaciados comunes a distintos tipos de elementos, tamaño de línea, etc.

Layout

Los estilos de «Layout» definen la estructura general de las páginas. Esto es, la disposición de las secciones principales de maquetación, como encabezados, pies de página y contenedores principales. Estos estilos organizan el contenido en un nivel superior y ayudan a mantener la consistencia estructural del sitio.

Módulos

Dentro de los «Módulos» encontramos los componentes reutilizables como botones, tarjetas y listas. Cada módulo es autónomo y tiene sus propios estilos que se repetirán cada vez que se incorpore en la página. Esto facilita su reutilización.

Estados

Luego tenemos los «Estados» que se refieren a las variaciones o cambios dinámicos en la interfaz de usuario, como el estado «activo» de un botón, o cuando un campo de texto está deshabilitado o tiene un error, por poner algunos ejemplos. Estos estilos se definen por separado para mantener el control y la claridad, asegurando además que los cambios de estado de los elementos no afecten otros módulos o estilos más globales.

Temas

Por último, tenemos el «Tema», que son aquellos estilos que permiten personalizar el diseño de un proyecto cambiando colores, fuentes u otros estilos visuales, de una manera centralizada. Los temas ayudan a mantener la coherencia visual y a aplicar variaciones estilísticas en diferentes contextos sin modificar la estructura o el comportamiento de los elementos de la página.

Categorías en SMACSS: ¿cómo organizar tu CSS de forma eficiente?

Ahora que conoces los principios de SMACSS puedes aplicar todo ese conocimiento directamente a las categorías de CSS con las que puedes organizar tu código de forma eficiente.

CSS base: reglas globales y reinicios de estilo

En la base tenemos que ubicar el reseteo de estilos y las reglas globales que afectan a las etiquetas del HTML. Este CSS será muy estable. Es decir, una vez definido raramente necesitaremos editarlo.

CSS de layout: diseño y estructura de la página

La categoría de estilos de «Layout» definirá la disposición de las secciones principales del sitio, proporcionando una estructura consistente a lo largo de todas las páginas.

Módulos: componentes reutilizables y su organización

La categoría de «Módulos» debería contener los estilos de elementos reutilizables, asegurando que cada componente sea autónomo y fácil de mantener. Generalmente tendremos un archivo CSS por módulo, lo que facilitará el mantenimiento.

Estados: manejo de variaciones y cambios dinámicos en la UI

Con la categoría de «Estados» gestionaremos los cambios dinámicos, como el estado de un elemento interactivo, manteniendo la separación y claridad.

Temas: personalización y ajuste de estilos según necesidades

La categoría «Temas» facilita la personalización y el cambio de apariencia del sitio. En ella normalmente daremos valores a variables CSS que se utilizan a lo largo del sitio.

Mejores prácticas para implementar SMACSS en proyectos CSS

Ahora vamos a conocer las prácticas más recomendables para implementar SMACSS correctamente, de modo que se facilite su aplicación.

Cómo estructurar y organizar tu CSS siguiendo SMACSS

Estructura tu CSS dividiéndolo en las categorías que hemos visto y mantén cada estilo organizado en el lugar correcto para que sea fácil encontrarlo y se facilite el mantenimiento.

Uso de nomenclatura coherente para mayor legibilidad

Utiliza la misma nomenclatura a lo largo de todo el proyecto, de manera coherente y consistente. Esta nomenclatura debe hacer que cada regla sea fácil de entender en lo que respecta al propósito y función. Es importante que todo el equipo siga las mismas normas.

Separación del código CSS para mejorar la escalabilidad

Mantén separados los estilos en archivos y carpetas distintas, para mantener la separación del código por responsabilidades y ser capaz de encontrarlo fácilmente. Luego puedes unir todos los archivos de código CSS con alguna herramienta como PostCSS para mejorar la optimización del código.

Ejemplos prácticos de SMACSS en CSS

Aplicar SMACSS en proyectos reales requiere cierta organización que se aprecia en la medida que el código va creciendo, por eso es difícil representarlo en un post como este. De todos modos vamos a ver algunos ejemplos simplificados, para poder aterrizar las ideas.

Cómo organizar un archivo CSS siguiendo la arquitectura SMACSS

Organiza tu código CSS creando secciones claras para cada categoría de SMACSS. Podríamos tener una estructura de archivos como esta:

  • base.css
  • layout.css
  • modules/button.css
  • modules/card.css
  • theme.css

Así consigues mantener los estilos de cada categoría en lugares bien diferenciados.

Ejemplo de código CSS modular y escalable con SMACSS

Ahora vamos a ver el CSS que podría ubicarse en cada uno de esos archivos.

Archivo base.css

body {
  font-family: Arial, sans-serif;
  margin: 0 0 32px 0;
  padding: 0;
}

Archivo layout.css

.header {
  display: flex;
  justify-content: space-between;
}
.aside {
  width: 320px;
}

Archivo modules/button.css

.button {
  background-color: var(--button-background, #aa8);
  color: white;
  padding: 10px;
}
/* State */
.button.is-active {
  background-color: darkblue;
}

Archivo theme.css

/* Theme */
.theme-dark .button {
  --button-background: #ffc
}

Aplicación de SMACSS a un proyecto real: paso a paso

Obviamente, cada una de las categorías tendría muchos más estilos y en un proyecto real tendríamos probablemente decenas de módulos, pero la organización del CSS sería más o menos la que hemos visto.

Solo nos ha quedado por indicar que existirá un archivo llamado style.css o algo similar que debería realizar todos los imports en el orden correcto atendiendo a la cascada del CSS.

Archivo style.css

@import 'base.css';
@import 'theme.css';
@import 'layout.css';
@import './modules/button.css';
@import './modules/card.css';

Herramienta de compilado

Para acabar, sería necesario usar PostCSS o alguna otra herramienta de compilación del código, para agrupar todo el CSS en un mismo archivo. Generalmente usarás Vite o Webpack de manera adicional para poder ejecutar estas herramientas en el proceso de build del código frontend.

Ventajas de usar SMACSS en proyectos grandes

Aunque ya las hemos dejado entrever, vamos a hacer un repaso de las ventajas que nos ofrece el uso de SMACSS en proyectos grandes.

Mantenimiento más sencillo y menos código duplicado

La organización del código de manera modular facilita saber dónde está cada bloque de CSS, permitiendo una mayor productividad y haciendo que el mantenimiento del proyecto sea más intuitivo. Además, reduce la aparición de código duplicado.

Mejor rendimiento y estructura escalable a largo plazo

Cuando usas herramientas de compilación del código CSS mejoras la optimización. Recuerda además que al usar PostCSS puedes producir un minimizado del código, lo que también hará que sea menos pesado. Por otra parte, SMACSS permite crear proyectos que escalan con facilidad, ya que el CSS crece con un orden lógico y predecible.

Mayor flexibilidad en la personalización de la interfaz

Cuando trabajas con unas reglas fijas y bien definidas es mucho más fácil hacer código que personaliza la interfaz, de modo que todos entiendan las posibilidades y la función.

SMACSS y herramientas modernas de desarrollo web

La aplicación de SMACSS no es exclusiva a muchas otras prácticas habituales en el desarrollo del CSS. De hecho, en proyectos reales generalmente aplicarás herramientas modernas de codificación y mantenimiento del CSS.

SMACSS con preprocessadores como Sass o Less

Aunque cada vez son menos necesarias, las herramientas de pre-procesado del código CSS suelen aportar numerosas utilidades que los desarrolladores se han acostumbrado a utilizar. Es por tanto frecuente usar SMACSS junto con preprocessadores como Sass o Less para modularizar y optimizar el código CSS. Incluso actualmente es muy frecuente usar PostCSS, como hemos indicado anteriormente. 

Integración de SMACSS con frameworks como Bootstrap o Foundation

También puedes aplicar SMACSS en proyectos que usen frameworks CSS, ya que las reglas de estructuración del código no son exclusivas a la realización del código desde cero. La diferencia sería tan solo que tendremos mucho código que se gestione sin nuestra intervención, por el simple hecho de haber aplicado el framework. Por tanto, sigue siendo importante que los desarrolladores estén alineados con las reglas de aplicación de SMACSS.

Adaptación de SMACSS en proyectos con CSS-in-JS

Del mismo modo que con los frameworks o preprocesadores, los principios de SMACSS aún son aplicables y útiles para mantener el código bien organizado y escalable en proyectos con CSS-in-JS.

La única diferencia es que CSS-in-JS introduce estilos directamente en el JavaScript y se gestiona a nivel de componentes. Al final lo importante es mantener una organización bien clara sobre el CSS, y en este caso también sobre el JavaScript, para que los desarrolladores adopten siempre una misma línea en la toma de decisiones.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: