Arquitectura ITCSS 🛖
I:InvertedT:TrianguleCSS
ITCSS es una colección de pribcioios y metricas.
La idea es visualizar el css como un triángulo invertido en capas
.
Principios Basicos
- Sin ID, en css
- Patrón component UI
- Arquitectura basada en clases
Metricas
- De estilos genericos a estilos especÃficos
- De baja especificidad a alta especficidad
- De largo alcance a localizado
Triangulo
Magnitud
Especificidad Claridad
.
Magnitud: Alcance e impacto en cantidad de elementos
Especificidad: Fuerza del selector y sus propiedades
Claridad: Menor abstracción en la semántica e impacto del selector
.
Beneficios
- Estilos globales se comparten de manera más eficaz y eficiente
- Disminución de batallas por especificidad
- Menos redudancia
Capas
- Settings
- Variables globales
- Tools (Solo en caso de que se usen preprocesadores)
- Funciones globales y mixins
- Generic
- CSS comun
- Elements
- Estilos de Selectores de elementos
- Objects
- Selectores basados en clases para objetos o contenedores
- Components
- Estilos para cada componente
- Trumps
- Estilos de utilidad y ayuda
- En este caso podemos usar !important ðŸ¦
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?