Avanzato18 min

Architettura CSS

Organizzare il CSS su larga scala con metodologie, naming convention e strategie di composizione.

Architettura CSS

Quando un progetto cresce, il CSS diventa rapidamente ingestibile senza una strategia. L'architettura CSS definisce come organizzare, nominare e comporre gli stili.

BEM — Block Element Modifier

La naming convention più diffusa. Rende chiara la relazione tra le classi.

css

/* Block */
.card { }

/* Element — parte del block */
.card__titolo { }
.card__immagine { }

/* Modifier — variante */
.card--evidenziata { }
.card__titolo--grande { }

Utility-first (Tailwind)

Approccio opposto a BEM: classi atomiche composte direttamente nell'HTML.

css

/* Queste utility sono già pronte in Tailwind */
.flex { display: flex; }
.items-center { align-items: center; }
.gap-4 { gap: 1rem; }
.rounded-xl { border-radius: 0.75rem; }

Layer e cascade control

La direttiva @layer di CSS moderno ti dà il controllo esplicito sulla cascade.

css

@layer reset, base, componenti, utility;

@layer reset {
  *, *::before, *::after {
    margin: 0;
    box-sizing: border-box;
  }
}

@layer componenti {
  .card {
    padding: 1.5rem;
    border-radius: var(--raggio);
  }
}

@layer utility {
  .sr-only {
    position: absolute;
    clip: rect(0 0 0 0);
  }
}

●Mantieni la specificità bassa e uniforme
●Separa gli stili in file logici: reset, base, componenti, utility
●Documenta le convenzioni nel progetto perché il team le rispetti