Arquitectura de triángulo invertido para CSS (ITCSS)

Compartir esta publicación

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:

  Ejemplo de desarrollo aplicando TDD (Parte 1)

vSiy5k4IvdOiPRA Xtss49Il5M9FidzLTs4DCo1xHG4xgjX7TiaouuAZfSsEy545BL0jVNRnFxK1jDRwKjDPWa0YJSY rTXlGn

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.

oNZDM44OEcrHbQTau fiOMkHqgXATGWsw EkdJfP g1uCzwRepPDRcF fMh1w3ZjrbVQk7KAyAGTcw4YyuJCq50 Z9HZ19bzQYKDifrvcWcnbJILJ5qVHybvDNiSb18tXHVpTC7I

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.

  Mejores prácticas de despliegue de software

Manage large CSS projects with ITCSS | Creative Bloq

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í:

n2ZxeiTQDF15L2gE9jhwy6eAVroJOg BrL5ZdhIKYEgUR6JC4zogUDErJeD5RtuA0Vx8aUtla3uje5UJAjHJaeMSMxX5r74 F4PSVaeebfUNl2IOkbafeVCPBpwt0fos aHD NAX

– 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.

  Patrón feature flag en java

uCpv7dDnDFJuA ZbymjE2Lgmf8E ATJllkJirbqj7M0bL1HmA4vMXJJIORr56vHdN hz ltguVzChC5YWUrAupPCUIirp6VXsrzGRqLIEKNFHO8pQaW3pClLdCwxdkbDxy2Qs 0D

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

Author

  • Jose Castro

    Web developer, strongly oriented to the front end but with extensive backend knowledge that allows him to develop a better teamwork. His main motivation is continuous learning

    Ver todas las entradas

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Suscríbete a nuestro boletín de noticias

Recibe actualizaciones de los últimos descubrimientos tecnológicos

¿Tienes un proyecto desafiante?

Podemos trabajar juntos

apiumhub software development projects barcelona
Secured By miniOrange