ITCSS para principiantes: Primeros pasos y conceptos básicos

ITCSS es una arquitectura creada por Harry Roberts, pensada en la escalabilidad y mantenimiento de los estilos CSS de un proyecto. Es de las más usadas en React, y con la que se construyeron varios frameworks de CSS como Tailwind. A pesar de que se puede implementar esta metodología con CSS puro, es recomendable (y está pensado) para usarse con un preprocesador como SASS, el cual nos permite dividir nuestros estilos en archivos independientes.

Capas de ITCSS

Esta arquitectura nos propone organizar nuestro código CSS en base a un diagrama de triángulo invertido, con siete capas que van en un orden jerárquico: lo largo de la capa en el eje X representa el alcance que esta tiene, y la posición en el eje Y representa la fuerza. Entre más abajo del diagrama esté, menos abstracto y más específico será.

La organización de esta arquitectura es la siguiente:

1- Settings: Es la primera capa del triángulo y con mayor alcance. Aquí se definen todas las variables o configuraciones globales de nuestro proyecto. Un ejemplo de lo que contendría el archivo sería el siguiente:

/* Variables de SASS */

$yellow: yellow;
$blue: blue;


/* Variables normales de CSS */

:root {
  --yellow: yellow;
  --blue: blue;  
}

2- Tools: En esta capa se definen todos los mixins y funciones del proyecto. Un mixin es una herramienta que nos provee SASS para evitarnos el trabajo de reescribir el mismo código varias veces. Por ejemplo, podríamos querer tener una función que nos centre el contenido utilizando flex, pero en una sola línea de código.

/* Creamos una variable en SASS con el signo de dólares */
@mixin flex($flex-direction, $justify-content, $align-items) {
  display: flex;
  flex-direction: $flex-direction;
  justify-content: $justify-content;
  align-items: $align-items;        
}

/* Se usaría de la siguiente manera */

.container {
  /* Utilizamos el mixin, colocando los valores que deseamos en las variables */
  @include flex(row, center, center);
}

3- Generic: Aquí se buscará establecer una configuración de estilos base que nos servirá para eliminar los estilos por defecto del navegador o como normalmente se le llama, nuestros reset de CSS. Es importante que se establezca al principio del proyecto, para ser sobrescritos por nuestros estilos con clases. Estos son algunos de los resets más conocidos en el mundo del desarrollo web, junto con sus ventajas y desventajas:

Aunque es útil el uso de un reset para nuestro proyecto, no es obligatorio e incluso podríamos hacerlo nosotros mismos. Por ejemplo:

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;    
}

body {
  font-size: 100%;
}

button {
  border: none;
}

a {
  text-decoration: none;
}

4- Elements: Se diferencia de la capa Generic porque aquí no eliminamos los estilos predeterminados del navegador, sino que colocaremos los estilos generales para etiquetas HTML. Aún no se usan clases. Para entender mejor lo que debe ir dentro de esta capa, podemos hacernos las siguientes preguntas: ¿Cómo se deberá ver un botón en nuestra página web? ¿Es realmente necesario aplicar una clase al mismo elemento <button> todo el tiempo, o con un estilo general es suficiente?

Por ejemplo, tenemos que maquetar una página y, según su diseño, todos los enlaces deben ser de un color rojo. Además, al pasar el mouse por encima deben cambiar a color azul. También queremos que los botones siempre tengan un redondeado de 5rem, sean de color amarillo y tengan cierto padding. Probablemente, estos estilos podríamos encontrarlos dentro de la capa Elements:

a {
  color: red;     
}

a::hover {
  color: blue;
  transition: color .2s linear;  
}

button {
  border-radius: 5rem;
  background-color: yellow;
  padding: 1rem 2rem;
}

5- Object: A partir de aquí podemos usar clases. En esta capa irían los estilos de la estructura de la página para que se acomode a distintos dispositivos y pantallas. En esta capa también podemos ubicar las distintas animaciones de nuestra página. Algunos ejemplos de objetos pueden ser contenedores genéricos que se repitan una y otra vez en nuestra página, y queramos evitar escribir los estilos multiples veces. Por ejemplo:

.section-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

6- Components: Esta carpeta suele ser la más extensa, ya que aquí es donde, con clases, podemos definir los estilos de nuestros componentes independientes, ya sea de React o algún otro framework. Es recomendable realizar subdivisiones por carpetas según la estructura de nuestro proyecto.

7- Utilities: La capa más específica de ITCSS. Permite el uso de los !important y se usa sólo en casos muy específicos, como hacer compatibles algunos estilos que aún no funcionan en navegadores viejos u obsoletos. Es riesgosa, ya que aquí se sobrescribirán los estilos de todas las capas anteriores, así que se debe usar con responsabilidad. Un ejemplo de cómo TailwindCSS utiliza esta capa mediante utility classes es el siguiente:

.justify-content-md-start {
    justify-content: flex-start !important;
}

Ventajas de usar ITCSS

• Escalabilidad: Al dividir el código en capas más pequeñas y específicas, es más fácil añadir nuevas características sin afectar el proyecto. Está pensado para ser manejado en sitios web sencillos y hasta aplicaciones web grandes y complejas, gracias a su estructura modular.
• Mantenibilidad: Al separar los estilos en diferentes capas, cada una con un enfoque distinto, es más fácil identificar y corregir los errores además de hacer cambios y actualizaciones a futuro.
• Reutilización: ITCSS propone la creación de estilos reutilizables, ya que permite la facilidad de crear componentes con un patrón de diseño que se puede usar en diferentes lugares del proyecto, una y otra vez.

Desventajas de usar ITCSS

• Es complejo de aprender: ITCSS necesita conocimientos previos acerca de los conceptos de CSS y las buenas prácticas en el desarrollo web, lo que puede ser un poco complicado de entender para los desarrolladores que apenas inician, lo que nos lleva al siguiente punto.
• Puede volverse demasiado específico: Si no se ha aprendido la arquitectura correctamente, es posible que los desarrolladores terminen por confundirse y no respetar las capas de la arquitectura, lo cual puede hacer que en el futuro sea difícil de mantener y provoque problemas de especificidad. Esto puede pasar, por ejemplo, con el uso excesivo de la capa "Utilities", la cual solo se debe usar en casos de emergencia, como hacer compatible una función que no está disponible en algunos navegadores antiguos.
• Demasiados archivos de SASS: Conforme el proyecto crece, es muy probable que tengamos más archivos CSS de los que se podrían hacer con otras metodologías. Esto puede provocar que sea un poco más complejo manejar los archivos y sea necesario crear subcarpetas enfocadas en áreas específicas de nuestro proyecto.

Implementación de ITCSS y estructura de carpetas

Por convención, cuando se trabaja con arquitecturas CSS, se suele usar un guion bajo al inicio de cada nombre. Con ITCSS, podemos organizar las capas en orden alfabético colocando un número por orden de capa, luego un guion, y el nombre de la capa. Cada estilo dentro de las carpetas también deberá contener un guion bajo al inicio de cada nombre. Muchos desarrolladores suelen importar todos los estilos en un solo archivo de SASS. Si se sigue esa línea, se deberán importar por orden de capa, de la menos específica hasta la más específica, tal como propone ITCSS en su diagrama de triángulo invertido. Esto permite evitar errores y problemas con la especificidad.

BEMIT: Una arquitectura que combina ITCSS con BEM

BEMIT es una combinación de lo mejor de la metodología BEM (Block, Element, Modifier) con ITCSS. Sugerido también por el mismo Harry Roberts, nos permite nombrar nuestras clases y relacionarlas de una mejor manera, al mismo tiempo que organizamos nuestros proyectos bajo la jerarquía del triángulo invertido.

Primero que todo, BEM se basa en nombrar a nuestros elementos como Bloques, a sus elementos hijos como Elementos, y a sus diferentes estados como modificadores. Cualquier elemento de HTML, desde un botón hasta un header, pueden ser bloques. BEM no define una jerarquía, sino que define las diferentes partes o "elementos" que forman parte del bloque. Un ejemplo de BEM podría ser el siguiente. Tenemos un header, que dentro contiene un nav. Este nav es un elemento del bloque header, así que lo representaremos con dos guiones bajos, y así con los demás elementos. También tenemos dos links del header, uno de contacto y otro de servicios. Queremos que mantengan los mismos estilos de la clase .header__link, pero a la vez, también queremos aplicar otros estilos para ambos de ellos. Para ello podemos usar los modificadores, escribiendo el nombre de la clase, dos guiones y el nombre del modificador, que en este caso sería "contact" y services.

<header class="header">
  <nav class="header__nav">
    <img src="./miimagen.jpg" class="header__logo" />
    <ul class="header__link-container">
      <li class="header__link header__link--contact">Contacto</li>
      <li class="header__link header__link--services">Services</li>      
    </ul>    
  </nav>
</header>

Los elementos son representados con el nombre de su bloque y dos guiones bajos, mientras que los modificadores son representados con el nombre de su bloque, su elemento, y los dos guiones normales.

Ahora bien, aplicando esto a BEMIT, Harry Roberts nos sugiere combinar ITCSS con BEM, pero usando algunos prefijos antes de su nombre. Hay varios prefijos, pero algunos de los más utilizados son:

c- (Componente)

Indica que esta clase afectará únicamente al componente al que está asociado, sin modificar ningún otro elemento en nuestra aplicación. Es uno de los prefijos que más se utilizan en BEMIT. Un ejemplo de uso sería el siguiente:

/* Sin BEMIT */
<header class="header">
  <nav class="navbar">
    <img src="./miimagen.jpg" class="logo" />
    <ul class="link-container">
      <li class="link-contact">Contacto</li>
      <li class="link-services">Services</li>      
    </ul>    
  </nav>
</header>

/* Con BEMIT */
<header class="c-header">
  <nav class="c-header__nav">
    <img src="./miimagen.jpg" class="c-header__logo" />
    <ul class="c-header__link-container">
      <li class="c-header__link c-header__link--contact"><a>Contacto</a></li>
      <li class="c-header__link c-header__link--services"><a>Services</a></li>      
    </ul>    
  </nav>
</header>

o- (Object)

Es una clase que nos puede servir para usarla en varios lugares de nuestra aplicación y no depende de un contexto o componente específico, lo que lo hace un poco más arriesgado que un componente a la hora de modificarlo, pero nos ayuda a evitar escribir los estilos una y otra vez.

/* Sin BEMIT */
<button class="btn btn_primary">Ingresar</button>

/* Con BEMIT */
<button class="o-btn o-btn--primary">Ingresar</button>

u- (Utility)

Clases que nos sirven solo en casos muy urgentes. Es la clase más específica de ITCSS, la cual sobrescribe cualquier estilo que haya sido creado en alguna de las capas anteriores. No es obligatoria, y lo mejor es tratar de evitarlas. Algunos casos donde pudiera ser necesaria son, por ejemplo, hacer compatible alguna función que quizá no está disponible en cierto tipo de navegadores (como Safari), y debamos usar un código especial que haga algo similar.

/* Sin BEMIT */
.tac {
  text-align: center !important;
}

/* Con BEMIT */
.u-tac {
  text-align: center !important;
}

¿Porqué usar BEMIT?

Mientras que BEM proporciona una forma estructurada de nombrar y relacionar clases en HTML, utilizando bloques, elementos y modificadores, ITCSS ofrece una organización de los estilos basada en CSS. Al combinar ambas metodologías, BEMIT nos permite organizar nuestros proyectos de una mejor manera al nombrar y relacionar clases, al mismo tiempo que nos ayuda a evitar errores de especificidad con la jerarquía de estilos que nos brinda la arquitectura.

Referencias utilizadas

• Apiumhub - Arquitectura De Triángulo Invertido Para CSS (ITCSS)
• desarrolloweb.com - Qué es ITCSS y cuáles son las bases de esta propuesta arquitectónica para el desarrollo del código CSS.
• Medium - ITCSS: Scalable and Maintainable CSS Architecture
• dev.to - ITCSS - Arquitectura CSS
• Apiumhub - Explaining BEMIT: ITCSS + BEM
• Alura Latam - Reset CSS: Qué es, Ejemplos, Cómo Crear y Utilizar