Introduzione / background: componenti CSS
Per un sito web relativamente grande stiamo lavorando con SASS e stiamo cercando di gestire i CSS nei componenti. L'idea di base dei componenti è che un componente dovrebbe apparire lo stesso ovunque, indipendentemente dagli elementi del contenitore più avanti nel DOM.
Quindi, vogliamo evitare cose come questa (SASS):
// User picture component.
.user-picture {
img {..}
}
// Override user picture for the frontpage.
body.page-front .user-picture img {..}
Invece, se vogliamo che l'immagine dell'utente appaia diversa sulla prima pagina, dovrebbe essere un componente diverso. Per esempio. con ereditarietà SASS, o con un mixin:
// User picture component.
.user-picture {
img {..}
}
// User picture on frontpage.
.user-picture-front {
@extend .user-picture;
img {..}
}
Quindi dobbiamo modificare l'html sulla prima pagina, in modo che usi la versione diversa dell'immagine dell'utente.
Fin qui tutto bene. Ho postato quanto sopra come illustrazione della mia attuale comprensione di cosa sono i componenti CSS.
La domanda: classi modificatori: buone pratiche?
Ora stiamo incontrando un problema: alcune pagine hanno uno sfondo scuro (nero), quindi il testo, i bordi e le cose devono essere bianchi.
Questo in qualche modo va oltre i componenti: lo stesso componente dovrebbe avere il testo scuro per impostazione predefinita, ma testo bianco se si trova all'interno di un contenitore con uno sfondo scuro.
Quindi abbiamo questa fantastica idea:
// Generic modifier class for all dark-background containers.
.white-on-black {
// Generic text color change.
color: white !important;
}
// Component.
.my-component {
border: 1px solid blue;
// Special for white-on-black.
.white-on-black & {
border-color: yellow;
}
}
Quindi abbiamo una classe "modificatore" o "contesto" esterna white-on-black che modifica la modalità di visualizzazione degli elementi interni.
La motivazione è che il componente stesso non è responsabile dello sfondo di un elemento contenitore più avanti nel DOM.
Questo funziona. L'unico problema è se abbiamo un contenitore di sfondo bianco all'interno del contenitore di sfondo scuro. Ma a parte questo, funziona bene.
La domanda è se questa sia architetticamente una buona pratica, con lo sfondo di cercare di mantenere i componenti indipendenti l'uno dall'altro.
L'alternativa sarebbe avere un componente diverso, ad es. my-component-on-dark-bg , che eredita da my-component e ha il colore diverso per testo e bordi. Ma qui il codice (ad es. PHP) che produce il componente html deve conoscere l'esterno, cioè se viene usata una dark bg. Supponendo che il codice PHP che rende il componente sia separato dal codice PHP che rende il contenitore. Che è ancora gestibile, ma potrebbe essere un argomento per il modello con una classe modificatore, come descritto sopra.
Note
In realtà stiamo prefiggendo le nostre classi CSS con un prefisso specifico del progetto. Ho appena lasciato questo qui per semplicità, e perché non sono affari di nessuno su quale progetto sto lavorando:).