Cómo resolver cuellos de botella de CSS a gran escala con ITCSS y BEM

###IntroducciónEn los proyectos de código base de interfaz, los requisitos y, a veces, los alcances pueden cambiar con frecuencia. Cuando los requisitos cambian y usted ajusta la hoja de estilos o extiende los estilos de un selector en una página en particular, dichos cambios suelen afectar otras vistas que comparten estilos similares.

Esto puede dar lugar a muchas horas de guerras de especificidad al intentar anular estilos. Esto sucede porque el proyecto no se estructuró de la manera adecuada para garantizar que los cambios en las hojas de estilo no tuvieran un impacto negativo en todo el proyecto. En este tutorial, verá cómo combinar el CSS Block Element Modifier (BEM) con el CSS Inverted Triangle (ITCSS) para evitar problemas.

Dificultades comunes que se encuentran al trabajar con CSS

CSS como lenguaje tiene algunos problemas que hacen que su gestión sea un poco difícil para los desarrolladores.

• Es declarativo, lo que significa que no tiene un flujo de control que le indique el estado de un proyecto.
• Todo existe en el ámbito global, lo que hace posibles las colisiones de estilos.
• También está la cuestión de la especificidad, que determina el estilo que se aplica a un selector en particular.

Estos problemas se hacen mucho más evidentes cuando un proyecto crece y más desarrolladores trabajan en la misma base de código. Si no se implementan las estructuras adecuadas, los cambios en las hojas de estilo tienden a volverse impredecibles.

Para estructurar correctamente el CSS de forma que nos ayude a evitar estos problemas, Harry Roberts creó “Inverted Triangle CSS (ITCSS)”. Se trata de una metodología que puede ayudarnos a estructurar el CSS de forma que se comporte de forma más predecible. Fue diseñada para ayudar a los desarrolladores que trabajan en proyectos de gran escala a organizar y gestionar mejor su CSS.

Según Harry, ITCSS es una colección de principios y métricas por las cuales los desarrolladores deberían agrupar y ordenar sus CSS para mantenerlos escalables, concisos, lógicos y manejables. Es una metodología que implica visualizar un proyecto CSS como un triángulo invertido en capas. Esta forma jerárquica representa un modelo que ordenará los CSS por métricas definidas por el diseño del lenguaje con una mejor escalabilidad y facilidad de mantenimiento de la que obtendríamos si escribiéramos CSS en función de cómo piensa una persona.

ITCSS también es flexible y se puede utilizar con o sin preprocesadores. Es compatible con otras metodologías CSS como BEM, SMACSS u OOCSS. A medida que avancemos en este tutorial, le mostraré cómo puede utilizar ITCSS con BEM.

Principios básicos de ITCSS

Sin identificaciones en CSS

Los identificadores tienen una alta especificidad de selector y esto puede dificultar la anulación de estilos. Para anular un identificador, agregamos más identificadores o usamos !important, lo que puede iniciar guerras de especificidad en sus hojas de estilo. Anular y extender estilos no debería ser difícil para que su CSS sea fácil de mantener y agradable de usar.

Patrón de interfaz de usuario de componentes

Un componente es una colección de marcas reutilizables, generalmente con cierta lógica y estilo. Los componentes son autónomos y sirven como bloques de construcción de tecnologías frontend modernas: React, Angular, Vue, Ember, etc. ITCSS prefiere la arquitectura de interfaz de usuario con componentes por sobre las páginas.

Arquitectura basada en clases

Una buena arquitectura CSS es aquella que es reutilizable y flexible. ITCSS favorece el uso de clases, ya que se pueden utilizar varias veces en la misma página y se pueden colocar varias clases en un elemento en particular. Las clases también hacen que el HTML sea más fácil de leer.

Métricas clave de ITCSS

ITCSS ordena su proyecto utilizando tres métricas clave.

Estilos genéricos a estilos explícitos

Comience con selectores genéricos, de alto nivel y de amplio alcance y luego avance gradualmente hacia selectores explícitos y más específicos. Puede comenzar con reglas de restablecimiento del navegador y luego continuar con selectores de elementos y hasta llegar a reglas explícitas como btn-primary.

De baja especificidad a alta especificidad

Cada regla CSS tiene un peso de especificidad, lo que significa que puede ser más o menos importante que las demás o igual de importante. Este peso define qué propiedades se aplicarán a un elemento cuando haya reglas en conflicto. Mantener las reglas menos específicas en la parte superior y las reglas de alta especificidad debajo de ellas garantiza que los estilos se apliquen correctamente para evitar conflictos y guerras de especificidad.

De largo alcance a lo localizado

Al principio de un proyecto, las reglas CSS afectan a gran parte del DOM, pero a medida que avanzamos en el proyecto, las reglas afectan menos al DOM y se vuelven más específicas para los componentes. Podemos empezar por eliminar marginstodo paddings. A continuación, podemos aplicar estilos a cada tipo de elemento, luego limitarlo a cada tipo de elemento con una determinada clase aplicada a él, y así sucesivamente. Es esta reducción gradual del alcance lo que nos da la forma de triángulo.

Beneficios

Seguir estas tres métricas clave tiene muchos beneficios, por mencionar algunos:

• Los estilos globales y de largo alcance se comparten de forma más efectiva y eficiente.

• La probabilidad de guerras de especificidad se reduce ya que CSS está escrito en un orden lógico y progresivo en términos de especificidad.

• CSS se vuelve más extensible y se evitan los estilos redundantes, lo que genera tamaños de archivo menores y menor latencia.

• Pasamos muy poco tiempo deshaciendo cosas porque nuestra cascada y especificidad apuntan todas en la misma dirección.

Capas ITCSS

Dividir nuestro CSS en capas nos ayuda a cumplir con las métricas mencionadas anteriormente. Cada capa se agrega en una ubicación que se alinea con las métricas. Cada capa suele ser una progresión lógica de la capa anterior. A medida que avanzamos por las capas, aumenta la explicitud y la especificidad y se reduce el alcance de los selectores.

Esto significa que el CSS se vuelve más fácil de escalar, ya que lo escribimos en un orden que solo agrega elementos a lo que ya se escribió anteriormente. También significa que todo tiene su propia ubicación predecible, lo que hace que sea más fácil encontrar y agregar estilos.

El ITCSS tiene siete capas que analizaremos más de cerca aquí:

Ajustes

Este es el punto de partida para utilizar preprocesadores CSS. Contiene variables globales a las que se puede acceder desde cualquier lugar dentro del proyecto CSS. Algunos ejemplos de configuraciones globales son los tamaños de fuente y las definiciones de color.

Herramientas

Esta capa contiene funciones globales y mixins y se encuentra después de las configuraciones, ya que los mixins y las funciones pueden necesitar acceso a las configuraciones globales. Esta capa es la segunda capa si está utilizando preprocesadores. Algunos ejemplos son font-sizelos mixins, px-to-remmixins, etc. Es importante evitar escribir estilos reales en las primeras dos capas.

Genérico

Este es el punto en el que se escribe el CSS propiamente dicho y también es el punto de partida si no se utiliza un preprocesador. Contiene estilos como funciones de restablecimiento de CSS, reglas globales de ajuste de tamaño de caja y reglas de normalización de CSS. Los estilos que se encuentran aquí afectan a gran parte del DOM.

Elemento

Esta capa contiene estilos de selector de elementos. Contiene estilos para elementos HTML simples y sin clasificación. Los estilos para elementos form, heading, y también imgse incluyen aquí. Los estilos aquí aún tienen una especificidad muy baja, pero afectan un poco menos al DOM.linkstable

Objetos

Esta es la primera capa con un selector basado en clases. Contiene estilos para objetos no cosméticos, como contenedores, envoltorios y sistemas de diseño. Esta capa afecta menos al DOM que la última capa, tiene una mayor especificidad y es ligeramente más explícita, dado que ahora nos dirigimos a secciones específicas del DOM con clases.

Componentes

Esta capa contiene el estilo de cada componente de tu proyecto. Es más explícita que la capa anterior porque ahora estamos diseñando elementos de la interfaz de usuario visibles. En los marcos basados ​​en componentes como Angular, Vue o React, esta es la capa donde importas el estilo de cada componente si no los incluyes directamente en tu componente.

Triunfos

Esta capa supera a las demás capas. Aquí es donde se definen los estilos de utilidad y de ayuda. Tiene una gran especificidad, puede anular estilos anteriores y es la punta del triángulo. La mayoría de los estilos aquí contienen la !importantbandera.

El resultado

Cuando se combinan todas las capas, podría verse así.

// main.scss@import "settings.fontsize";@import "settings.colors";@import "tools.functions";@import "tools.mixins";@import "generic.reset";@import "generic.normalize";@import "elements.forms";@import "elements.table";@import "objects.contianer";@import "objects.grid";@import "components.site-nav";@import "components.buttons";@import "components.carousel";@import "trumps.clearfix";@import "trumps.utilities";

Uso de BEM con ITCSS

Block Element Modifier (BEM) es una metodología para nombrar estilos CSS. Según Getbem, BEM es una convención de nombres muy útil, potente y sencilla que hace que el código de interfaz sea más fácil de leer y comprender, más fácil de trabajar, más fácil de escalar, más sólido y explícito, y mucho más estricto.

BEM es particularmente útil para las capas sexta y séptima de ITCSS, donde se utilizan mucho los selectores basados ​​en clases. Seguir BEM garantizaría que las clases tengan los nombres correctos para una mejor legibilidad.

Ejemplificando la metodología BEM

B (Bloque) Un bloque es un nodo de nivel superior, la abstracción de nivel más alto de un componente. Es una entidad independiente o un componente en una página web.

Ejemplo:

.btn {  rules}

E (Elemento) Los elementos son elementos secundarios de un bloque. No tienen un significado independiente y están semánticamente vinculados a un bloque. Los elementos tienen como prefijo el nombre de su bloque y un guión bajo doble.

Ejemplo:

.btn__text {  rules}.btn__icon {  rules}

M (Modificadores) Los modificadores se utilizan para cambiar la apariencia de un bloque o un elemento. Nos brindan una forma de crear variaciones de reglas de bloques y elementos.

.btn--lg {  rules}.btn__text--light {  rules}.btn__icon--right {  rules}

##Conclusión

Cuando es necesario realizar cambios en su base de código, no desea perder tiempo anulando estilos y librando guerras de especificidad. La arquitectura de triángulo invertido garantiza que no haya guerras al ayudarlo a visualizar el estado de toda su base de código en términos simples.

Seguir sus principios ayuda a crear un sistema accesible, predecible, adivinable, basado en reglas, propenso a tamaños de archivos más pequeños y orientado a la escalabilidad y el crecimiento.

Si estás trabajando en un proyecto front-end que hace un uso intensivo de CSS, te recomendaría usar ITCSS con BEM para que tu código sea más fácil de leer y comprender. Esto no solo garantizará un buen mantenimiento del código, sino que también promoverá la empatía de los nuevos desarrolladores.