Organización de archivos: patrones ITCSS y 7-1

A medida que los proyectos crecen, un único archivo CSS se vuelve inmanejable. Las estructuras de organización de archivos ayudan a los equipos a dividir el CSS en capas lógicas que se cargan en el orden correcto y son fáciles de recorrer.

ITCSS organiza el CSS en capas ordenadas según una especificidad creciente. Al igual que un triángulo invertido, las reglas más amplias y genéricas se encuentran arriba, mientras que las más específicas están abajo. Esto respeta la cascada natural.

Las 7 capas de ITCSS (de la más a la menos genérica):

1. Configuración — Variables y tokens de diseño
2. Herramientas — Mixins y funciones
3. Genérica — Restablecimiento/normalización
4. Elementos — Estilos base de los elementos HTML
5. Objetos — Abstracciones de diseño (sin aspectos visuales)
6. Componentes — Componentes de interfaz
7. Utilidades — Sobrescrituras y ayudas; aquí se permite !important

Una estructura de archivos ITCSS habitual:

El patrón 7-1 organiza Sass en 7 carpetas y 1 archivo principal que importa todo:

• abstracts/ — variables, funciones y mixins
• base/ — restablecimiento, tipografía y elementos base
• components/ — botones, tarjetas y modales
• layout/ — encabezado, pie de página, barra lateral y cuadrícula
• pages/ — estilos específicos de cada página
• themes/ — varios temas
• vendors/ — CSS de terceros

Un archivo principal main.scss importa todos los parciales en orden:

La propiedad moderna de CSS @layer ofrece las mismas ventajas de ordenación de la cascada que ITCSS, sin necesidad de un preprocesador. Las capas se declaran una vez y su prioridad permanece fija independientemente del orden en el código fuente.

Una alternativa a los archivos de estilos centralizados es colocar el CSS del componente junto al archivo del componente. Es una práctica habitual en proyectos de React/Vue que utilizan CSS Modules o CSS-in-JS.

Los archivos parciales de Sass comienzan con un guion bajo (_button.scss). El guion bajo indica a Sass que el archivo no se compila de forma independiente, sino que debe importarse en un archivo principal.

Si no utiliza Sass, PostCSS con el plugin @import o el @import nativo de CSS junto con @layer permite conseguir la misma organización de archivos sin un preprocesador.

Tanto si utiliza ITCSS, el patrón 7-1 o archivos colocados junto a los componentes, cada componente debe tener su propio archivo. Asigne al archivo el nombre del componente cuyos estilos contiene: _card.scss, button.css, Nav.module.css.

En ITCSS, ¿qué capa se encuentra en la parte superior del triángulo invertido (la más amplia y menos específica)?

ITCSS ordena las capas CSS de lo genérico a lo específico siguiendo la cascada. El patrón 7-1 organiza Sass en 7 carpetas importadas mediante un único archivo principal. La propiedad moderna de CSS @layer ofrece el mismo control de la cascada de forma nativa. Ya sea centralizada o colocada junto a los componentes, la idea clave es tener un archivo por componente y mantener un orden coherente de las importaciones.