La risposta a questa domanda non è solo una questione di esigenze di design o di sviluppo, ma è un semplice test per le competenze tecniche e le conoscenze di base della teoria dei CSS.
Molti sviluppatori web non hanno una solida conoscenza dei CSS e questo problema entra in gioco quando devono personalizzare il layout di base generato da un framework CSS, al fine di soddisfare le loro esigenze.
Finché ci si limita a applicare le classi agli elementi, la teoria CSS non è rilevante. Ma quando si tenta di modificare anche un valore delle proprietà, allora si dovrebbe conoscere bene i CSS.
Prendiamo ad esempio la griglia di base generata da Bootstrap. Sapete come funziona? È semplicemente il box model in azione: una serie di box la cui larghezza è calcolata prendendo un valore iniziale come riferimento.
Provate da soli: data una larghezza del 100%, come è possibile generare una griglia fatta di 12 box?
100 / 12 = 8.3333 , cioè la larghezza del box più piccolo.
.col-xs-1 {
width: 8.33333333%;
}
Quindi è possibile calcolare le rimanenti larghezze. Ma questo non è abbastanza.
Si dovrebbe anche prendere in considerazione la spaziatura orizzontale. In questo caso viene creata la spaziatura orizzontale tra i box tramite padding:
.col-xs-1 {
padding-right: 15px;
padding-left: 15px;
}
Se si vuole modificare questo layout, è necessario conoscere due aspetti chiave dei CSS: selettori e cascata. I CSS3 ci forniscono selettori di attributo avanzati che possono selezionare sottostringhe all'interno dei valori degli attributi.
[class*="col-"] {
...
}
Utilizzando questo codice, si possono effettivamente selezionare tutte le colonne utilizzate da Bootstrap.
In altre parole, la risposta alla domanda posta in questo articolo può essere formulato come segue: utilizzate un framework CSS solo se sapete esattamente quello che state facendo
.