CSS
Estrategias para organizar estilos, limitar dependencias, nombrar componentes y definir capas, responsabilidades y límites dentro de una base CSS.
Una arquitectura CSS define cómo se organizan responsabilidades y overrides para que añadir una feature no rompa componentes distantes.
baja especificidad
+ límites claros
+ estados explícitos
+ orden de cascada conocido
= cambios predeciblesRuta posible:
tokens
reset
base
layout
components
utilities
exceptionsNo es obligatorio usar estas categorías exactas. Cada una debe tener una función y una prioridad definida.
@layer base {
body {
margin: 0;
color: var(--color-text-default);
background: var(--color-surface);
}
}Estiliza elementos y defaults amplios, no detalles internos de componentes.
.stack {
display: grid;
gap: var(--stack-space, 1rem);
}
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cluster-space, 0.75rem);
}Representan relaciones reutilizables sin conocer el dominio.
.card {
display: grid;
gap: 1rem;
}
.card__title { ... }
.card[data-variant="featured"] { ... }Un componente define estructura visual, variantes y estados propios.
.sr-only { ... }
.text-center { text-align: center; }Son pequeñas, explícitas y con una política de prioridad conocida.
No deberían convertirse en nombres ambiguos que ocultan varias decisiones.
.card { }
.card__title { }
.card--featured { }Aporta nombres globalmente claros:
No requiere anidar cada selector ni reflejar cada nodo del DOM.
Organiza Composition, Utility, Block y Exception. Prioriza que layout global y bloques locales tengan responsabilidades separadas.
Ordena estilos desde genéricos y de baja especificidad hacia componentes/utilities más explícitos.
Introdujeron separación entre estructura/skin y categorías de reglas. Son ideas útiles, no leyes que deban combinarse todas.
.card { ... }El build transforma nombres para scope local. Reduce colisiones, pero no elimina cascada, herencia, global styles ni necesidad de arquitectura.
Puede ofrecer co-location, props dinámicas y eliminación por bundle. También puede añadir runtime, orden de inyección y dependencia del framework.
Distingue:
Aísla selectores y parte de styling mediante host, parts y custom properties.
No elimina herencia, tokens ni necesidad de estados accesibles.
Menos estable:
.red-box-left { ... }Más estable:
.alert[data-severity="error"] { ... }El nombre comunica propósito y el atributo representa la variante.
.button[aria-expanded="true"] { ... }
.input[aria-invalid="true"] { ... }Utiliza estados semánticos reales cuando existen. Para estado interno de aplicación, una clase o data-* puede ser correcta.
.dashboard .sidebar .card h3 { ... }Acopla el componente a una página. Mejor crea una variante, token local o layout contract.
Una excepción debe explicar:
¿Por qué .checkout-page .card h2 es más frágil que una variante del componente?
Porque depende de una estructura y página externas; mover la card o cambiar su markup altera el resultado sin modificar el componente.
Sistemas de diseño y Atomic Design conecta tokens, componentes, patrones y páginas.