top:: CSS

ITCSS : Inverted Triangle CSS

ITCSS es una metodología de arquitectura CSS que organiza las hojas de estilo en una estructura en forma de triángulo invertido. La idea es establecer una jerarquía clara y específica para las reglas CSS, de manera que se puedan evitar problemas de especificidad y mantener un flujo de cascada más controlado. La estructura de ITCSS se divide en las siguientes capas:

!ITCSS.png

• Settings (Configuración): define variables, configuraciones globales y ajustes del proyecto.
• Tools (Herramientas): contiene mixins y funciones de utilidad.
• Generic (Genérico): incluye estilos de reinicio, normalización y estilos globales.
• Elements (Elementos): se refiere a estilos básicos para elementos HTML sin clases o identificadores.
• Objects(Objetos): reglas de diseño estructural, como grillas, contenedores, etc.
• Components (Componentes): estilos específicos de componentes reutilizables.
• Utilities (Utilidades): clases de utilidad para estilos específicos y ajustes rápidos.

ITCSS fomenta la modularidad y la reutilización de estilos al proporcionar una estructura organizada para el código CSS. Además, evita problemas de especificidad al establecer un orden de cascada claro y predecible.