Introducción a ITCSS para desarrolladores web

Hay un puñado de grandes métodos para estructurando el código CSS, y todos ellos trabajan de diferentes maneras. Los más populares son OOCSS y SMACSS, pero también hay un método menos conocido llamado ITCSS (CSS de triángulo invertido) creado por Harry Roberts.

No es una biblioteca o un marco, sino un metodología de escritura de código Eso es escalable y fácil de manipular. Los beneficios de ITCSS van desde organización de código simple a tamaños de archivo más pequeños, y una mayor comprensión de la arquitectura CSS.

ITCSS no es para todos, 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 ver cómo se pueden aplicar a proyectos web.

Que es el ITCSS?

Las formas modernas de organizar CSS a menudo recurren a modularización o Objetos CSS construir ideas abstractas.

La nueva idea de Inverted Triangle CSS es una forma en capas de dividir las propiedades CSS Basado en 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.

Dado que ITCSS es en su mayoría propietarios, no existe un libro de reglas detallado sobre su uso. Solo un conjunto de principios específicos está a nuestra disposición. El autor habla de ellos en el siguiente video..

Por defecto, ITCSS usa los mismos principios que OOCSS pero con mayor separación Basado en la especificidad. Entonces, si ya está familiarizado con OOCSS, considere esto como único arquitectura CSS alternativa intentar.

Éstos son algunos de los mayores beneficios de usar ITCSS:

• Los objetos de página se pueden dividir en sus propios archivos CSS / SCSS para reutilización. Es simple copiar / pegar y extender cada objeto en otros proyectos.
• La profundidad de especificidad es Depende de usted.
• Hay sin estructura de carpetas establecida, y no requiere el uso de herramientas de preprocesamiento.
• Puede combinar conceptos de otras metodologías, como módulos CSS para crea tu propio flujo de trabajo híbrido.

El sistema ITCSS

Veamos cómo funciona el modelo de triángulo invertido usando la siguiente ilustración de la publicación de Lubos Kmetko.

Un flujo direccional desde la parte superior plana del triángulo invertido hasta la punta en la parte inferior simboliza una aumento de especificidad. Esta centrarse en menos especificidad Facilita la reutilización de clases en un sitio varias veces..

Cada subsección del triángulo puede considerarse un archivo o grupo de archivos separados, aunque no es necesario que escriba el código de esa manera. Tiene más sentido para los usuarios de Sass / Less debido a la función de importación. Solo piense en cada subsección como una metodología para División y organización de código CSS reutilizable..

Echemos un vistazo rápido a cada sección del triángulo invertido moviéndose de arriba hacia abajo a la punta.

• Ajustes - Variables y métodos del preprocesador (sin salida CSS real)
• Herramientas - Mixins y funciones (sin salida CSS real)
• Genérico - Los restablecimientos de CSS que podrían incluir el restablecimiento de Eric Meyer, Normalize.css o su propio lote de código
• Elementos - Selectores de elementos HTML únicos sin clases
• Objetos - Clases para estructura de página típicamente siguiendo la metodología OOCSS.
• Componentes - Clases estéticas para estilizar cualquier elemento de la página y todos (a menudo combinados con la estructura de clases de objetos)
• Triunfos - Los estilos más específicos para anular cualquier otra cosa en el triángulo.

Cada capa del triángulo invertido puede ser ajustado a sus necesidades. Entonces, si no usa un preprocesador CSS, no necesitará las capas de Configuración o Herramientas.

Debe sentirse libre de interpretar cada subsección como lo considere oportuno. Por ejemplo, Jordan Koschei explica cómo combinó la estructura y la estética en clases de objetos, dejando muy poco en la sección Componentes..

ITCSS tiene no hay reglas duras y rápidas que debes seguir. No hay un verificador de cumplimiento de ITCSS, y nadie le gritará por alterar ligeramente este modelo.

Aunque el creador de ITCSS, Harry Roberts, estaba interesado en mantener sus métodos patentados para uso interno, puede encontrar un ejemplo de código abierto de ITCSS En este repo de GitHub. Está alojado en la cuenta de CSS Wizardry, que es el sitio web personal de Harry Roberts..

BEM + IT = BEMIT Naming

Uno de los esquemas de nombres de CSS más populares es BEM. Esto significa Block-Element-Modifier y sigue una sintaxis muy particular.

Cada elemento en BEM describe una convención de nomenclatura para las clases CSS:

• Bloques son clases para elementos individuales que se pueden replicar y son independientes.
• Elementos siempre son parte de un bloque
• Modificadores siempre modifique un bloque o elemento para cambiar ligeramente su apariencia (encendido / apagado, activo / inactivo, fijo, estático, resaltado / neutral).

BEMIT es la convención de nombramiento adoptado por el ITCSS, que toma prestadas ideas de BEM mientras implementa nuevas ideas con ITCSS.

La sintaxis BEM dicta reglas muy específicas. A continuación se muestra una muestra del sitio web de BEM:

.form  .form - theme-xmas  .form - simple  .form__input  .form__submit  .form__submit - disabled  

Los bloques tienen nombres sin separación, o nombres separados por un guión o un guión bajo. Los elementos usan dos guiones bajos y describen elementos internos consistentes con ese bloque en particular. Los modificadores funcionan de la misma manera pero usan dos guiones para la identificación.

Harry profundiza en BEMIT en esta publicación de blog. Su descripción es muy concisa y muestra que la verdadera naturaleza del ITCSS es Juega amigable con otras metodologías CSS.

Harry define espacios de nombres para objetos apareciendo como prefijos para cada nombre de clase principal. Se descomponen como o- para objetos, do- para componentes, y tu- para utilidades (como clearfix o centrado de texto).

Aquí hay algunos ejemplos de código que representan Convenciones de nomenclatura típicas de BEMIT.

  
... 
 
 

También recomienda usar el @ sufijo para clases basadas en estilos de medios. Entonces el .o-media la clase podría cambiar a .o-media @ lg para pantallas grandes, y .o-media @ md para pantallas medianas.

Personalmente, creo que los sufijos adicionales son demasiado complicado para proyectos web básicos. Creo que la mayoría de los desarrolladores preferirían usar consultas de medios comunes y reescribir las clases en diferentes puntos de interrupción. Pero no puedo decir que ninguno de los dos métodos sea correcto o incorrecto, y cualquiera puede decidir individualmente si quiere usar BEMIT o no.

Recomiendo leer este artículo introductorio de BEMIT para obtener más información acerca de por qué el ITCSS extendió el BEM y cómo podría nombrar sus clases de CSS.

El ITCSS puede resumirse como un método de organización para la escritura CSS reutilizable y escalable. BEM es la sintaxis de nomenclatura preferida, y BEMIT extiende esto al trabajo Con espacios de nombres para códigos más específicos y reconocibles..

Hay mucho que aprender, y si eres nuevo en CSS, este será un concepto difícil de romper. Pero si está dispuesto a aprender, le garantizo que se sorprenderá con la naturaleza elegante del código ITCSS.

Terminando

Los desarrolladores front-end siempre buscan optimizar su flujo de trabajo. ITCSS es solo otro método que puede contribuir a un método mejorado de estructuración de sitios web complejos.

La dificultad es aprender cómo funciona en un proyecto de trabajo real. Si tiene la temeridad y la unidad para aprender, el ITCSS puede ser algo que valga la pena agregar a su caja de herramientas. Aunque no he encontrado ninguna documentación oficial, todavía hay muchos recursos en línea para aprender sobre el ITCSS..

• Gestione proyectos web a gran escala con la nueva arquitectura CSS ITCSS (creativebloq.com)
• Gestión de proyectos CSS con ITCSS - Diapositivas de presentación (speakerdeck.com)
• Proyectos CSS con ITCSS (1h presentación de video)
• ITCSS - Una forma interesante de organizar proyectos a gran escala (css-tricks.com)

(Foto de portada a través de speakerdeck.com)