La arquitectura ITCSS (Inverted Triangle CSS) propone organizar tu hoja de estilos como un triángulo invertido, donde el código va de lo más genérico y de mayor alcance a lo más específico y puntual. Es una forma de escalar proyectos grandes sin caer en la batalla de selectores ni en estilos duplicados.

Si trabajas con CSS en aplicaciones medianas o grandes, esta arquitectura te ayuda a mantener orden, jerarquía y previsibilidad en cada capa.

¿Cuáles son los principios básicos de ITCSS?

Antes de pensar en capas, ITCSS define tres reglas que marcan cómo debes escribir tu CSS desde el inicio.

• No usar IDs en CSS. Esto reduce la complejidad de los selectores y evita peleas innecesarias de especificidad.
• Patrón de component UI. Divide tu proyecto en componentes pequeños y reutilizables.
• Arquitectura basada en clases. Toda la estructura se apoya exclusivamente en clases para mantener consistencia.

¿Por qué ITCSS evita los IDs? Porque los IDs tienen una especificidad muy alta y rompen la jerarquía del triángulo invertido, generando conflictos difíciles de sobrescribir.

¿Qué métricas guían el triángulo invertido?

Las métricas son la lógica del flujo: cómo debe comportarse tu CSS al avanzar por el triángulo.

• De estilos genéricos a estilos específicos.
• De baja especificidad a alta especificidad.
• De largo alcance a alcance específico.

Estas tres dimensiones se traducen en tres magnitudes del triángulo: magnitud, especificidad y claridad. La magnitud es el impacto sobre la cantidad de elementos, siempre de más a menos. La especificidad es la fuerza de los selectores, lo más baja posible. Y la claridad busca que la semántica de los selectores sea fácil de leer, sin abstracciones innecesarias.

¿Qué beneficios obtienes al aplicar ITCSS?

Cuando respetas el triángulo, tu hoja de estilos se vuelve más limpia y mantenible.

• Los estilos globales se comparten de forma más eficiente.
• Disminuye la batalla de selectores.
• Se reduce la redundancia de clases y estilos repetidos.

¿Para qué tipo de proyectos sirve ITCSS? Idealmente para proyectos grandes, donde la cantidad de componentes y estilos hace que la organización sea crítica.

¿Cuáles son las capas del triángulo invertido en CSS?

Las capas son el corazón de ITCSS y se estructuran en este orden de arriba hacia abajo del triángulo: settings, tools, generic, elements, objects, components y trumps.

Settings, tools y generic

Estas tres capas son la base global del proyecto.

• Settings: variables globales como fuentes, colores y tamaños. Es el archivo principal de configuración.
• Tools: funciones globales y mixins. Solo tiene sentido si usas un preprocesador como Sass, ya que los mixins son propios de ese ecosistema.
• Generic: CSS común que se aplica a nivel general en distintas partes de la aplicación.

Elements, objects y components

Aquí el alcance se vuelve más concreto y empiezas a tocar piezas visibles de la interfaz.

• Elements: estilos para selectores de elemento como nav o form. Por ejemplo, elements.forms o elements.table.
• Objects: pequeños contenedores estructurales, como objects.container u objects.grid.
• Components: estilos propios de cada componente, como components.side-nav, components.buttons o components.carrusel.

Trumps

La última capa rompe una regla a propósito.

Trumps contiene estilos de utilidad o ayuda. Suelen invocarse desde JavaScript para mostrar u ocultar elementos, o aplicar ajustes puntuales. Y sí, aquí se permite usar !important. Aunque tiene una especificidad altísima y normalmente se evita, en esta capa cumple una función legítima: sobrescribir estilos existentes de manera intencional. De ahí el nombre trumps, porque triunfa sobre lo demás.

¿Cuándo es válido usar !important en ITCSS? Solo en la capa trumps, cuando necesitas sobrescribir estilos previos con clases utilitarias o de ayuda.

Cómo se ve ITCSS en el archivo main

Cada capa se importa en orden dentro del archivo principal de CSS o Sass, respetando el flujo del triángulo invertido. Primero settings, luego tools, generic, elements, objects, components y al final trumps. Ese orden no es estético: es lo que garantiza que la especificidad crezca de forma controlada y que los estilos más específicos puedan sobrescribir a los más generales sin trucos raros.

En la siguiente clase verás esta arquitectura aplicada a un proyecto real, donde cada capa cobra sentido al tocar el código. ¿Has trabajado antes con alguna arquitectura CSS similar? Cuéntame en los comentarios cuál usas y cómo te ha funcionado.