La metodología SMACSS te ayuda a organizar tu CSS en cinco tipos de carpetas para que tu proyecto sea escalable y fácil de mantener. Si trabajas con hojas de estilo grandes y quieres evitar el caos de selectores, esta arquitectura modular es para ti, sobre todo si vienes del mundo del desarrollo front-end.

Qué significa SMACSS y para qué sirve

SMACSS son las siglas de Scalable Modular Architecture for Cascading Style Sheets, una arquitectura modular escalable para CSS [0:13]. La idea central es separar tu proyecto en cinco categorías de carpetas: base, layout, módulos, estado y temas. No tienes que cumplir con todas al pie de la letra, pero esa es la lógica que guía la organización.

¿Qué es SMACSS en CSS? Es una metodología que divide tus estilos en cinco categorías (base, layout, módulos, estado y temas) para que el código sea modular, escalable y fácil de mantener.

Cómo se estructura la carpeta base en SMACSS

La base contiene los estilos predeterminados que aplican a todo el proyecto [0:48]. Aquí la regla de oro es no usar clases ni IDs, porque esos selectores aumentan la especificidad y suman complejidad innecesaria.

Lo ideal es trabajar solo con selectores de tipo. Por ejemplo:

• html con margin: 0.
• a para quitar la línea por defecto de los enlaces.
• button con un color y un border-radius predeterminados.

Con eso reduces al máximo los conflictos de especificidad y mantienes una capa limpia desde la cual construir todo lo demás.

Qué incluye el layout y por qué se usa el prefijo l

El layout se ocupa de la estructura general del proyecto [1:36]: secciones principales como el header, el footer y otros bloques que arman el esqueleto visual. Aquí sí puedes usar selectores de clase o de ID.

Una convención muy reconocible de SMACSS es anteponer una L a las clases relacionadas con layout. Por ejemplo, l-center te indica de inmediato que esa clase centra elementos horizontalmente. Cuando ves una l- al inicio de una clase, sabes que estás frente a SMACSS.

¿Por qué se usa el prefijo l en SMACSS? Porque deja claro que esa clase pertenece a la capa de layout y afecta la estructura general, no un componente individual.

Cómo nombrar los módulos en SMACSS

Los módulos son fragmentos únicos como una card o cualquier componente que no se repita [2:25]. La estructura típica usa un prefijo y un elemento secundario.

Mira este ejemplo:

• .section define la clase principal con sus propiedades.
• .section-title es la variante interna, con algo como font-size: 1.2rem.

Esa lógica de prefijo y subelemento te da consistencia y evita que los nombres se crucen entre componentes distintos.

Cómo manejar el estado y los temas en SMACSS

La categoría de estado sirve para cambiar el comportamiento visual de un elemento HTML [3:08]. Piensa en clases como is-selected para un botón cliqueado o is-visible para mostrar un modal escondido desde JavaScript. Dentro de cada clase pones las propiedades que se activan cuando ese estado ocurre.

Los temas agrupan lo que define la identidad visual de la aplicación: fuentes, colores y demás. Aquí entran modos completos como dark mode o light mode. También puedes definir escalas tipográficas con clases como:

• .text-xs con font-size: 1.2rem.
• .text-sm para un tamaño un poco mayor.
• .text-md y .text-lg para tamaños grandes.

Esa nomenclatura te da una paleta de utilidades coherente para reutilizar en todo el proyecto.

¿Cuál es la diferencia entre estado y tema en SMACSS? El estado cambia cómo se ve un elemento según una interacción (seleccionado, visible). El tema define la apariencia global del proyecto, como colores, fuentes o modo oscuro.

Con estas cinco categorías ya tienes el mapa mental de SMACSS. ¿Cómo organizas tú tus carpetas de CSS hoy? Cuéntame en los comentarios si ya usas alguna metodología parecida.