Arquitectura de triángulo invertido para CSS (ITCSS)

El concepto de CSS modular comenzó a emerger desde hace años. Todos los desarrolladores que hemos trabajado con CSS hemos tenido que lidiar con la dificultad de hacer que nuestros estilos sean escalables y mantenibles cuando nuestros proyectos empiezan a crecer y, además, colaboran varias personas. Es por ello que han ido surgiendo numerosas metodologías que permitan hacernos el trabajo más sencillo. Estas metodologías no se encuentran dentro de alguna librería o tecnología, son más una guía para ayudar a organizar nuestros CSS.

Las más conocidas son OOCSS (object Oriented CSS), SMACSS (Scalable and Modular Architecture for CSS), BEM (Block, Element, Modifier) e ITCSS (Inverted Triangle CSS).

El concepto de arquitectura CSS surge con el surgimiento de preprocesadores de CSS como SASS o LESS, y que nos permite importar distintos ficheros, utilizar variables y funciones entre otras funcionalidades. En este artículo me voy a centrar en la arquitectura ITCSS y las ventajas que puede ofrecer al implementarla en un proyecto.

¿Qué es ITCSS?

Fue desarrollado por Harry Robers con la idea de organizar nuestro código CSS de una forma óptima. Su nombre viene de Inverted Triangle architecture for CSS por la forma en cómo son organizados los archivos en capas de acuerdo al nivel de especificidad e importancia.

El propio Robers define ITCSS de la siguiente forma:

• Es una arquitectura escalable y manejable.
• Es una filosofía, no una librería.
• Es independiente de preprocesadores (aunque realmente se aprovecha mejor utilizando alguno).
• Es un meta framework, un framework para frameworks. Es decir, sirve de base para ser utilizado con otros frameworks.

El principal objetivo de su surgimiento es ayudar a organizar los ficheros CSS de nuestros proyectos y solventar así los problemas que acarrea la cascada y la especificidad de los selectores. Si observamos el siguiente gráfico, nos podemos hacer una idea de cómo acaban los proyectos a nivel CSS que no siguen una metodología correctamente:

Si vemos todas las reglas de nuestro proyecto en un solo fichero CSS, la izquierda del eje X de la gráfica sería el principio y la derecha el final. Vemos como tenemos reglas que están al principio prevalecen sobre reglas que están al final, mientras que otras que están en mitad son las que más importancia tienen. Resumiendo: tenemos un código complicado de mantener y donde las nuevas reglas que añadamos entran en conflicto directo con la especificidad.

El objetivo con ITCSS es que, mediante la organización de los ficheros CSS en capas, consigamos tener una especificidad de forma ascendente.

Es cierto que las reglas de especificidad y cascada son muy claras, pero cuando trabajamos en proyectos reales nos encontramos que la mezcla de utilizar id, !important y anidamientos provoca que aplicar una nueva regla sea un problema y nuestras aplicaciones acaben siendo poco mantenibles.

Por lo tanto, nos encontramos con que cada pieza de CSS necesita tener conocimiento de cual le precede y cual es la próxima. O lo que es lo mismo: se crean dependencias. Al final, CSS es un árbol gigante de dependencias.

Para solucionar todos estos problemas, en resumen necesitamos:

• Un entorno sano y accesible para mucha gente.
• Poder controlar y domar el orden del código y la cascada.
• Crear un lugar para que conviva lo antiguo con lo nuevo.
• Reducir la redundancia.
• Terminar con la guerra de la especificidad.

Y estos son los principios con los que nace ITCSS. Ahora vamos a ver un ejemplo de cómo se consigue.

Estructura

El código definido en las capas superiores tiene mayor impacto que el definido en las capas inferiores. Así las capas superiores afectan a las inferiores, pero nunca al contrario. Las capas inferiores heredarán los estilos de sus superiores.

– Settings. Aquí se definen las variables al utilizar un preprocesador. No genera CSS.

$main-color: #6834cb

– Tools. Si se utiliza preprocesador, las funciones y mixins se definen en esta capa. Al igual que la anterior, no genera CSS.

@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

– Generic. Se refiere al código genérico, aquel que sirve para resetear o estandarizar los estilos base de los navegadores. Por ejemplo un reset css o un normalize iría aquí.

* {
  padding: 0;
  margin: 0;
}

– Elements. Reglas que afectan a los tags HTML.

h1 {
  color: $main-color;
  font-size: 24px;
}

– Objects. Los objetos, es decir, aquellas clases genéricas que son reutilizables en todo el proyecto. Por ejemplo la container.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

– Components. Los componentes, al contrario que los objetos, son partes específicas de la interfaz. Un ejemplo de componente sería una barra de búsqueda o el header de nuestra aplicación. Los estilos que definamos para un componente, sólo afectarán a ese componente.

.search-bar {
  background-color: $pearl;
  color: $light-grey;
  font-size: 22px;
}

– Trumps. Esta capa también llamada Utilities, engloba a todas aquellas reglas que anulan cualquier otra que se haya definido en las capas anteriores. Es la única capa en donde se permite utilizar !important. Un ejemplo sería tener una clase que nos permita ocultar elementos mediante un display: none.

.d-none {
  display: none!important;
}

Estructura dentro de un proyecto

Vamos a dar por hecho que utilizamos SASS como preprocesador de CSS para estructurar nuestro proyecto, por lo que quedaría así:

– Una carpeta con los imports. Esto es algo que me gusta utilizar para tener mejor organizados los ficheros por cada capa de ITCSS, sobre todo cuando trabajan varias personas, así localizamos mejor nuestro código y donde añadir los nuevos ficheros a importar. De todas formas, si prefieres puedes omitir esta carpeta y añadir los imports directamente en el fichero principal.

– Fichero principal con todos los imports que será el que acabe compilado en un único CSS que utilizará nuestra aplicación. Al haber hecho las importaciones por capas en la carpeta imports, este queda mucho más ligero y limpio y no tendríamos que preocuparnos en añadir aquí ningún fichero más.

Los nombres de aquellos ficheros que solo van a ser utilizados de forma importada en otro fichero, empiezan por guión bajo para distinguirlos más fácilmente.

Conclusión

Y así es como quedaría la estructura de un proyecto siguiendo la arquitectura ITCSS de forma correcta. Está claro que para un proyecto pequeño hecho en Vue o React, quizás no le veas demasiada utilidad a su implementación pero para aquellos proyectos que son grandes, trabajan varias personas y necesitamos que sean escalables, ITCSS ofrece un marco de trabajo bastante consistente. También es muy útil si queremos crear nuestra propia librería que será común a varios proyectos, teniendo así una arquitectura unificada.

Para terminar, vuelvo a mencionar que ITCSS es inclusivo con otros marcos de trabajo, habiendo surgido incluso BEMIT, que es la utilización conjunta de BEM con ITCSS y que potencia los beneficios de ambos. Pero esto ya sería un tema a tratar en otro artículo.

Enlaces de interés

Charla de Harry Roberts explicando ITCSS en profundidad: https://vimeo.com/114965689