La arquitectura del triángulo invertido: cómo gestionar grandes proyectos CSS

Se le asigna una pequeña tarea para solucionar algunos pequeños problemas de estilo aquí y allá. Ha encontrado las reglas de CSS correctas para aplicar la corrección, por lo que rápidamente coloca esas reglas en la parte inferior de su archivo CSS, empuja sus cambios y luego continúa con cosas más importantes.

Con el tiempo, esto sucede un par de veces y antes de que te des cuenta, "la parte inferior" de tu archivo CSS consiste en unos cientos de líneas de código que nadie entiende y nadie se atreve a eliminar, ya que inevitablemente romperá cosas.

¿Reconoce este escenario porque lo ha hecho usted mismo o ha visto a colegas hacer esto? Bueno, sigue leyendo y prométete a ti mismo que nunca volverás a hacer esto, porque aquí tienes una manera más fácil de administrar tus archivos CSS.

Presentamos la arquitectura del triángulo invertido

La arquitectura del Triángulo Invertido, también conocida como ITCSS, es una metodología para estructurar su CSS de la manera más efectiva y menos derrochadora.

ITCSS fue introducido por primera vez por Harry Roberts y se puede visualizar mejor mediante un triángulo en capas invertido. ITCSS define las reglas CSS compartidas de un proyecto de una manera lógica y sensata, a la vez que proporciona un nivel sólido de encapsulación y desacoplamiento que evita que las reglas CSS no compartidas interfieran entre sí.

ITCSS es muy flexible ya que no le obliga a utilizar ninguna metodología de convención de nomenclatura específica como SMACCS, OOCSS o BEM.

Los principios

ITCSS funciona estructurando todo su proyecto CSS de acuerdo con estos 3 principios:

  1. Genérico a explícito

    Comenzamos con los estilos más genéricos, de bajo nivel y generales. Esto podría ser la configuración de fuente o, por ejemplo, variables de color si está utilizando SCSS.

  2. Especificidad baja a alta

    Los selectores de especificidad más baja aparecen al comienzo de su proyecto. La especificidad aumenta constantemente. De esta manera evitamos los conflictos de especificidad y la especificidad anula el uso !important.

  3. De gran alcance a localizado

    Los selectores al comienzo de nuestro proyecto afectan muchos elementos DOM, por ejemplo, los estilos de reinicio de su navegador, mientras que los selectores más adelante en nuestro proyecto se vuelven muy localizados, por ejemplo, estilos específicos para un componente.

Las capas triangulares

Cumplir con los principios anteriores significa que tenemos que dividir nuestro CSS en capas. Cada capa debe introducirse en una ubicación que respete cada uno de los criterios.

A menudo sucede que CSS se agrupa, por ejemplo, por estilos tipográficos, estilos de formulario y estilos para un componente específico. Estos grupos a menudo no se importan en el orden más eficiente y esto crea algunos problemas de herencia o especificidad.

En ITCSS, cada capa es una progresión lógica desde la anterior. Aumenta en especificidad, se reduce en alcance y se vuelve más explícito. Esto significa que nuestro CSS es más fácil de escalar, ya que solo agregamos lo que ya está allí y no anulamos lo que se escribió anteriormente.

Otra gran ventaja de seguir esta estructura es que todo el mundo siempre sabe dónde encontrar determinadas reglas CSS, ya que están colocadas de forma lógica. Esto evita el problema de que la gente deje caer sus reglas CSS al final del archivo.

Harry Roberts, el creador de ITCSS, estableció siete capas. Los ordenó de la siguiente manera:

  1. Configuraciones

    Si está utilizando un preprocesador como SCSS, este es su punto de partida. En esta capa defines tus variables.

  2. Herramientas

    Esta capa se puede utilizar para sus herramientas. Piense en combinaciones y funciones que deben estar disponibles a nivel mundial. Si no es necesario, colóquelos en la capa donde se necesitan.

  3. Genérico

    En esta capa, albergamos todos los estilos de muy alto nivel y gran alcance. Esta capa suele ser la misma en todos sus proyectos, ya que contiene elementos como Normalize.css, restablecimientos de CSS y, por ejemplo, reglas de tamaño de caja.

  4. Elementos

    En esta capa ponemos estilos para elementos HTML desnudos y sin clasificar. Podría, por ejemplo, pensar en subrayados para los anclajes al pasar el mouse o en tamaños de fuente para los diferentes títulos.

  5. Objetos

    En la capa de objeto, aplicamos estilo a los primeros elementos que tienen clases. Piense en sus contenedores, envoltorios o filas. También puede definir su cuadrícula aquí.

  6. Componentes

    La capa de componentes es el lugar donde ocurre la mayor parte de la magia del estilo, ya que aquí diseñará los elementos de la interfaz de usuario. En los marcos basados ​​en componentes como Angular, Vue o React, esta es la capa donde importa su estilo para cada componente si no los incluye directamente en su componente.

  7. Triunfos

    La capa de triunfos es la capa sucia. Incluso después de estructurar su estilo de acuerdo con los principios de ITCSS, puede suceder que tenga que usar !importantpara anular algunos estilos de terceros, por ejemplo. Haga eso en esta capa, ya que es la capa más específica, local y explícita.

El final resulto

Ahora que he explicado las capas, es hora de ver cómo podría verse un resultado final simple.

// [email protected] "globals";@import "branding";
// [email protected] "mixins";
// [email protected] "normalize";
// [email protected] "fonts";@import "form";
// [email protected] "grid";@import "wrappers";
// [email protected] "header";@import "sidebar";@import "carousel";@import "card";
// [email protected] "overrides";

Conclusión

Así como ITCSS no le obliga a utilizar determinadas convenciones de nomenclatura, tampoco le obliga a utilizar todas las capas. Utilice una estructura de capas que funcione mejor para usted mientras mantiene los principios de ITCSS de genérico a explícito, de baja a alta especificidad y de gran alcance a localizado.

Si nota que tiene que anular estilos, casi siempre significa que su estructura es ineficiente. Si tiene ganas de aprender más sobre esto, le recomiendo ver este video:

¿Buscas trabajo en Amsterdam?

Trabajo para Sytac como desarrollador front-end senior y estamos buscando desarrolladores medior / senior que se especialicen en Angular, React, Java o Scala. Sytac es una empresa de consultoría ambiciosa en los Países Bajos que trabaja para muchas empresas de renombre en los sectores bancario, aéreo, gubernamental y minorista.

Si crees que tienes lo necesario para trabajar con los mejores, envíame un correo electrónico a luuk [punto] gruijs [arroba] sytac [punto] io y estaré encantado de contarte más.