Hay un montón de métodos distintos para la estructuración del código CSS, y todos ellos funcionan de maneras diferentes. Los más populares son OOCSS y SMACSS, pero también existe un método menos conocido llamado ITCSS (triángulo invertido de CSS) creado por Harry Roberts.
No es ninguna librería ni ningún framework, sino una metodología para escribir código que es escalable y fácil de manipular. Los beneficios de ITCSS van desde tener el código mucho más organizado hasta contemplar archivos de menor tamaño, y sobretodo, una mayor comprensión de la arquitectura CSS.
ITCSS no es para todo el mundo, pero proporciona una manera profesional de ver las hojas de estilo con claridad durante el proceso de codificación. Vamos a profundizar en los conceptos detrás de ITCSS, y a ver cómo se pueden aplicar a nuestros proyectos web.
¿Qué es ITCSS?
Los métodos modernos de organización de CSS caen a menudo en la modularización o en los objetos de CSS para la construcción de ideas abstractas.
La nueva idea del triángulo invertido CSS es un método estratificado para dividir las propiedades del CSS en función de su nivel de especificidad e importancia. Es un método menos conocido en comparación con SMACSS y OOCSS, aunque ambos pueden combinarse con ITCSS.
No existe un detallado manual sobre las normas de uso de ITCSS, sólo un conjunto de principios específicos.
Por defecto, ITCSS utiliza los mismos principios que OOCSS pero con una mayor separación basada en la especificidad. Así que si estás familiarizado con OOCSS, considéralo una arquitectura única y alternativa que debes probar.
Éstos son algunos de los mayores beneficios del uso de ITCSS:
- Los objetos de la página se pueden dividir en sus propios archivos CSS / SCSS para su reutilización. Es muy sencillo copiar/pegar y extender cada objeto en otros proyectos.
- La profundidad de la especificidad depende de ti.
- No hay definida una estructura de carpetas, y no se requiere el uso de preprocesadores.
- Puedes combinar conceptos de otras metodologías tales como los módulos CSS para crear tu propio flujo de trabajo híbrido.
El sistema ITCSS
Vamos a echar un vistazo a cómo funciona el modelo de triángulo invertido utilizando la siguiente ilustración del post de Lubos Kmetko.
El flujo direccional desde la parte superior del triángulo invertido hasta la punta de la parte inferior simboliza un aumento de la especificidad. Este enfoque en menos especificidad, hace que sea más fácil de reutilizar clases en distintos sitios, varias veces.
Cada subsección del triángulo puede ser considerado como un archivo separado o un grupo de archivos, a pesar de que no es necesario escribir el código de esa manera. Tiene más sentido para usuarios acostumbrados a Sass/Less debido a la función import. Basta pensar en cada subsección como una metodología para dividir y organizar el código CSS reutilizable.
Vamos a echar un vistazo rápido a cada sección del triángulo invertido, empezando por la parte superior y yendo hacia abajo.
- Settings – Variables y métodos de preprocesadores
- Tools - Mixins y funciones
- Generic – Resets de CSS que podrían incluir el reset de Eric Meyer, Normalize.css, o tu propio bloque de código
- Elements - Selectores de elementos HTML individuales sin clases
- Objects - Clases para la estructura de la página, normalmente siguiendo la metodología OOCSS
- Components - Clases estéticas para dar estilo a cualquier o todos los elementos de una página
- Trumps - Estilos más específicos que permitan neutralizar cualquier otra cosa del triángulo
Cada capa del triángulo invertido puede ajustarse para adaptarse a tus necesidades. Así que si no utilizas un preprocesador CSS, no necesitarás la capa Settings ni la Tools.
Debes sentirte libre de interpretar cada subsección como mejor te parezca. Por ejemplo, Jordan Koschei explica la forma en que combina la estructura y la estética en clases de objetos, dejando muy poco en la sección Components.
ITCSS no tiene reglas duras que deben ser respetadas. No hay ningún corrector de ITCSS, y nadie te va a gritar si alteras ligeramente este modelo.
Aunque creador el ITCSS, Harry Roberts, quería mantener sus métodos para uso interno, puedes encontrar un ejemplo de código abierto de ITCSS en este repo de GitHub.
BEM + IT = Nomenclatura BEMIT
Uno de los esquemas de nomenclatura CSS más populares es BEM. Esto significa Block-Element-Modifier y sigue una sintaxis muy particular.
Cada elemento de BEM describe una nomenclatura para las clases CSS:
- Los bloques (block) son clases para los elementos individuales que pueden ser replicados y están solos.
- Los elementos (elements) son siempre parte de un bloque
- Los modificadores (modifiers) siempre modifican ligeramente la apariencia de un bloque o elemento.
BEMIT es la nomenclatura adoptada por ITCSS, que toma prestadas ideas de BEM, con suyas propias de ITCSS.
La sintaxis BEM dicta reglas muy específicas. A continuación una muestra de la página oficial de BEM:
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }
Los bloques tienen nombres, ya sea sin separación, o separados por un guión o por un guión bajo. Los elementos utilizan dos subrayados y describen los elementos internos en consonancia con ese bloque en particular. Los modificadores funcionan de la misma manera pero utilizan dos guiones para su identificación.
Harry profundiza en BEMIT en este post. Su descripción es muy concisa y muestra que la verdadera naturaleza de ITCSS es jugar de manera amistosa con otras metodologías de CSS.
Harry define que los namespaces para objetos aparezcan como prefijos para cada nombre de clase principal. Así mismo, se desglosan como o- para los objetos, c- para los componentes, y u- para las utilidades (como clearfix o el centrado de texto).
A continuación muestro algunos ejemplos de código que representa nomenclatura típica BEMIT.
<div class="o-media c-user c-user--premium"> <img src="" alt="" class="o-media__img c-user__photo c-avatar" /> <p class="o-media__body c-user__bio">...</p></div>También recomienda el uso del sufijo @ para las clases basadas en media styles. Así que la clase .o-media debería cambiar a .o-media@lg para pantallas grandes, y .o-media@md para pantallas de tamaño medio.
En lo personal, creo que los sufijos adicionales son demasiado complicados para proyectos web básicos. Creo que la mayoría de los desarrolladores prefieren utilizar media-queries comunes, y volver a escribir las clases en diferentes lineas. Pero no puedo decir que cualquiera de los métodos es correcto o incorrecto, y cualquiera puede decidir individualmente si quiere utilizar BEMIT o no.
Te recomiendo leer este artículo de introducción a BEMIT para aprender más acerca de por qué ITCSS extendieron BEM.
ITCSS puede resumirse como un método de organización para escribir CSS reutilizable y escalable. BEM es la sintaxis de denominación más popular, y BEMIT extiende esto para funcionar con namespaces y que así, el código sea más específico y reconocible.
Hay mucho que aprender, y si eres nuevo en CSS esto va a ser un concepto difícil de aprender. Pero si estás dispuesto a aprender, te garantizo que te sorprenderás con la naturaleza elegante del código ITCSS.
Fuente: hongkiat.com