En un artículo anterior escribí sobre la importancia de las convenciones de nombre en CSS, haciendo especial mención a BEM, SUIT CSS y Title CSS. Hoy quiero seguir explorando el tema de la organización del código CSS, centrándome en las arquitecturas de estilo. Es esencial escribir código limpio y ordenado en proyectos grandes, y sin embargo, a menudo se pasa por alto cómo abordar el CSS en la arquitectura general del software.
En particular, me gustaría presentar la arquitectura ITCSS, que ha demostrado ser muy eficaz para organizar el CSS en proyectos grandes y complejos. Con ITCSS, el CSS se organiza en capas según su especificidad y su alcance, de forma que se pueda mantener una jerarquía clara y coherente.
A lo largo del artículo, exploraremos cada una de las capas de ITCSS y cómo se relacionan entre sí, así como los beneficios de su implementación. Espero que este artículo sirva como un recurso útil para aquellos que buscan mejorar la organización y mantenibilidad de su código CSS.
El triángulo
El triángulo invertido (Inverted Triangle CSS) de ITCSS es el que le da el nombre a esta metodología.
La arquitectura ITCSS nos indica que la organización del código CSS debe ser planteada en base a un triángulo invertido, según la especificidad. Esto significa que las reglas de estilo más generales y básicas se agregan primero, y las reglas específicas que sobrescriben el comportamiento como las clases de utilidad (utility classes) se agregan al final.
Cabe señalar que si bien puedes implementar esta metodología con CSS puro, ya sea en un archivo o multiples archivos, es recomendable el uso de preprocesadores como SASS o alguna herramienta de empaquetado que facilite la separación de cada una de las capas y componentes en documentos independientes para luego ser compilados.
Conceptos
Si te preguntas el por qué de un triangulo invertido, bueno, es por lo siguiente:
Como se especifica en la imagen, mientras mas grande es la sección, el alcance es mayor. Y de manera contraria, Mientras mas pequeña es la sección el CSS debe ser mas explicito y especifico.
Estos conceptos describen como debe ir organizado nuestro código en un archivo .css
Como te habrás dado cuenta, en esencia, los tres conceptos presentados en la imagen son similares y uno es consecuencia del otro. Con una explicación, todo será mas fácil:
De genérico a explícito
Se debe empezar escribiendo CSS genérico de bajo nivel y progresivamente escribir CSS más especifico y explicito. Osea, podríamos empezar con un reinicio o normalización de CSS, continuar reglas del tipo h1, h2, h3, etc. E ir progresando hasta llegar a reglas tan explicitas como .text-center
De baja especificidad a alta especificidad
Empezaremos con reglas de baja especificidad y progresivamente se codificarán reglas de alta especificidad. Con esto evitaremos conflictos y con ello, evitaremos el uso de la clausula !important.
De amplio alcance a corto alcance (localizado)
Inicialmente, las reglas CSS afectaran directamente al DOM y a medida que se avance en el documento CSS, nos encontraremos con reglas mas localizadas por medio de clases.
Capas
Habiendo entendido la generalidad de la idea, es momento de abordar cada una de las capas que nos presenta ITCSS.
Settings
La primera capa y con mayor alcance es la capa de Settings. Esta solo debe ser utilizada si haces uso de un preprocesador como lo es SASS, y es donde definimos las variables o configuraciones globales de nuestro proyecto. El tamaño base de letra, paletas de colores, etc.
Tools
La siguiente capa hace referencia a todas esas herramientas (mixins o funciones) que puedan ser utilizados por las siguientes capas.
Generic
Esta es la primera que realmente produce CSS. Alberga todos los estilos de alto nivel y amplio alcance que buscan eliminar u homologar el estilo entre navegadores, o también, establecer una configuración estándar que será base en todo el proyecto. El típico código de ejemplo es el siguiente:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Esta capa por lo regular es estándar y puede ser reutilizada en multiples proyectos. Aprovecho de listar algunos ejemplos que ha elaborado la comunidad para que puedas utilizar en tus proyectos:
- MiniReset.css- Un pequeño reinicio de CSS moderno.
- Normalize.css - Un conjunto de reglas CSS que brindan una mejor coherencia entre navegadores en el estilo predeterminado de los elementos HTML.
- Sanitize.css - Un conjunto de reglas CSS que se adaptan a las mejores prácticas de hoy en día listas para usar.
En algún futuro artículo pretendo hablar mas extensamente de la diferencia entre un normalize y un reset y cual es mejor a mi parecer. Spoiler: Normalize casi el 100% de las veces.
Elements
Estos son elementos HTML sin clases. ¿Cómo se ve un h1 sin una clase en él? ¿Cómo se ve un a sin una clase? La capa de elementos solo usa selectores de tipo. Es un poco más explícito que la capa anterior en el sentido de que ahora decimos "haz que cada h1 sea así de grande", o "haz que cada a sea de un cierto color".
Objects
A partir de aquí empezamos a usar selectores de clases. Los objetos son elementos reutilizables con una mayor especificidad que los descritos en la capa Elements. Ejemplos concretos serían los típicos .button, .wrapper o .table. Es estilo que no nos sentimos cómodos colocandolo por medio de un selector de tipo como button debido a que en algún contexto puede que queramos utilizar el mismo tipo de elemento pero con otro estilo como por ejemplo, un botón que parezca un link.
En este punto también incluimos los modificadores de dichos objeto como lo sería .button--danger o .button--outline. Sin embargo, acá no debemos colocar modificadores globales (clases de utilidad) como .--text-center. Estos últimos forman parte de la capa "Trumps".
Components
Los componentes son las secciones independientes de nuestro sitio web. Acá nos podemos encontrar con el típico .header o .card que se componen de un conjunto de elementos y objetos. También es aquí donde pondremos modificadores de componente como .card--dark y elementos desentiendes como .card__title.
Trumps
Por ultimo tenemos la capa Trumps, la capa que "triunfa" sobre el resto. En esta capa podemos sobre escribir todo, y es donde seguramente estén todos nuestros !importants. Es aquí donde están nuestras clases de utilidad como --text-center.
Partials
Por último nos queda abordar los Parciales (Partials). Cada capa tiene sus parciales, aquellas partes de código que, por temas de orden, preferimos colocarlos en archivos independientes. Por convención, Harry Roberts (el creado de esta metodología) propone usar los nombres _<capa>.<parcial>.scss (por ejemplo: _settings.colors.scss, _elements.headings.scss o _components.tabs.scss).
Resultados
Para concluir, de usar esta metodología con un preprocesador, deberías terminar con un styles.scss como el siguiente:
@import "settings.global";
@import "settings.colors";
@import "tools.functions";
@import "tools.mixins";
@import "generic.box-sizing";
@import "generic.normalize";
@import "elements.headings";
@import "elements.links";
@import "objects.wrappers";
@import "objects.grid";
@import "components.site-nav";
@import "components.buttons";
@import "components.carousel";
@import "trumps.clearfix";
@import "trumps.utilities";
@import "trumps.ie8";
Código extraído de Manage large CSS projects with ITCSS
Conclusiones
Esta metodología es altamente efectiva para gestionar proyectos extensos y complejos. Al utilizarla, podrás mantener tu CSS organizado y fácil de mantener, y te despreocuparás de colisiones y redundancias. Sin embargo, como cualquier arquitectura, es importante considerar el costo que implica su implementación. Generar una arquitectura CSS no es algo que deba hacerse en todos los proyectos, ya que puede requerir un esfuerzo y tiempo excesivo si se trata de un sitio web pequeño o una página de presentación. En estos casos, es posible que sea más oportuno utilizar sistemas de diseño como Tailwind o Bootstrap.
En un artículo futuro, presentaré un ejemplo práctico de cómo aplicar esta metodología a un proyecto en React.js o Solid.js, donde los objetos y componentes pueden tener su propio CSS modular.
Top comments (0)