ITCSS – primer paso hacia BEMIT

Simplificando mucho y a modo de corta introducción, un par de conceptos útiles para entender este post:

BEM (Block, Element, Modifier): es una nomenclatura más estructurada del HTML y por tanto, del CSS.

ITCSS (Inverted Triangle CSS): es una manera de organizar las CSS en función de su especificidad.

BEMIT es la combinación de la nomenclatura BEM con la jerarquía de ITCSS.

BEM nos suena ¿cierto? No vamos a profundizar en ello aquí. Solo diremos que partimos de BEM para llegar a  BEMIT y que por el camino, nos conviene entender ITCSS. Pero ¿Qué es ITCSS?

ITCSS – Inverted Triangle CSS (Triángulo invertido CSS)

Ha sido desarrollado por Harry Roberts, siendo compatible con la nomenclatura BEM (y con casi cualquiera que estés usando a día de hoy en tus proyectos).

En su conferencia “Managing CSS Projects with ITCSS” explicó largo y tendido en que consiste, y os hago un breve resumen a continuación:

ITCSS es una manera de concebir el trabajo con CSS y HTML y organizarlo de una manera más óptima. No es una librería, no es una regla. Utiliza una jerarquía basada en el grado de especificidad del CSS, de menor concreción a mayor, creando un triángulo invertido. Arriba los elementos generales, en la última capa, los concretos, específicos.

ITCSS surge por la necesidad de:

– Desarrollar de una manera sana. Que nos permita escalar fácilmente el proyecto.
– Controlar y ‘domar’ la CSS y su cascada de herencias.
– Utilizar lo antiguo y lo nuevo, con un orden coherente.
– Reducir la redundancia.
– Acabar con las guerras de especificidad.

Ofrece:

– Una arquitectura escalable y limpia
– Es un meta framework: un framework para otros frameworks.
– Es muy simple.
– Es independiente de los preprocesadores. Lo puedes usar trabajando con lo que trabajes.

Si hiciésemos un estudio de Especificidad (‘Specificity Graph’) de la hoja de estilos de un proyecto cualquiera (especialmente si es de gran envergadura) nos encontraríamos algo parecido a la gráfica de la izquierda. Muchos picos asociados a alta concreción en nuestra CSS, seguido inmediatamente de un estilo mucho más general.

Estos picos pueden darse por utilizar ID, !important, selectores anidados… Se salta continuamente de una regla específica, a una regla general, creando picos y valles de especificidad. Lo que provoca que las llamadas en nuestra CSS salten continuamente.

Para seguir una llamada sin saltos, lineal y más lógica, sería necesario agrupar nuestra CSS por especificidad.

Estos niveles de especificidad, ha llevado a la creación de las capas de ITCSS.

Se parte de 7 capas:

1.- Settings – Se usa para las variables globales, elementos de configuración (Si usamos pre procesador, si no, podemos saltarnos esta capa)
2.- Tools – Mixins y Funciones (solo si usamos preprocesadores)
3.- Generic – Estilos CSS: reset, box-sizing, normalize.css…
4.- Base – Elementos HTML sin clases, selectores.
5.- Objects – Patrones de diseño, la estructura. Solo si usamos CSS dirigido a objetos (OOCSS)
6.- Components – Carruseles, calendarios… y sets de UI… Aquí metemos nuestros estilos concretos, para una lista concreta de un producto, por ejemplo.
7.- Trumps – Ayudas y lo que usamos para sobreescribir. La capa de los importants, la más específica de todas. Aquí habrá código muy concreto, para partes del DOM muy específicas.

No se trata de llamar de una manera específica a nuestras clases, para eso ya tenemos BEM. Es la manera en que vamos a llamar al archivo .css en función de a qué parte pertenece (y por tanto, que estilos hemos incluido en ella).

Todo el css que incluyamos en nuestro proyecto tiene que formar parte de alguna de estas capas. Nos obliga a pensar a qué pertenece cada línea de código antes de incluirla.

* Las media queries van incluidas en la css del elemento al que estamos dando estilos.

La nomenclatura para la css seguirá la pauta:
 

Nombre de la capa en la que nos hayamos + nombre de la css concreta:
· base .links.css
· components .carousel.css

El objetivo:

– Afectar al DOM de general a concreto.
– La especificidad aumenta de manera progresiva.
– Nunca se deshace, solo se añade.

No es un universo cerrado. En función de nuestra necesidades podemos añadir capas. Lo importante es seguir el orden de pirámide invertida:

– Escribir CSS en orden de especificidad
– Ser fieles al ‘Gráfico de especificidad’ evitando en la medida de lo posible, los picos.
– El orden en el que creamos las capas tiene que ser lógico. Por ejemplo, para una test AB podemos añadir la capa TEST entre Components y Trumps. O la capa THEME (también entre Components y Trumps).

Algunos documentos de interés:

PDF –  Conferencia – Managing CSS projects with ITCSS (todas las imágenes incluidas en este post, pertenecen a este PDF).