CSS: posso usare un framework?

Short link

La risposta a questa domanda non è solo una questione di gusti o di requisiti di progetto, ma è un semplice test per le tue capacità tecniche e conoscenze di base della teoria alla base 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 per soddisfare le loro esigenze.

Finché applicate semplicemente le classi agli elementi, la teoria CSS non è rilevante. Ma quando provi a cambiare anche un singolo valore di proprietà, allora dovresti sapere come funzionano i CSS.

Prendiamo ad esempio la griglia di base generata da Bootstrap. Sai come funziona? È semplicemente il box model in azione: una serie di box la cui larghezza viene calcolata prendendo come riferimento un valore iniziale.

Prova da solo: data una larghezza del 100%, come si può generare un sistema a griglia composto da 12 box diversi?

Ok, ti ​​darò un suggerimento: 100 / 12 = 8.3333 , cioè la larghezza del box più piccolo.


.col-xs-1 { 
  width: 8.33333333%; 
}

Quindi puoi calcolare le larghezze rimanenti. Ma questo non è abbastanza.

Dovresti anche prendere in considerazione la spaziatura orizzontale. In questo caso la spaziatura orizzontale tra i box viene creata tramite padding:


.col-xs-1 { 
  padding-right: 15px; 
  padding-left: 15px; 
}

Se vuoi modificare questi valori, devi conoscere due aspetti fondamentali del CSS: selettori e cascata. I CSS3 ci forniscono i selettori di attributi avanzati per le sottostringhe all'interno dei valori degli attributi:


[class^="col-"] { ... } 

Utilizzando questo codice puoi effettivamente selezionare tutte le colonne utilizzate da Bootstrap. Cascata (e specificità) vengono usate quando si inserisce il file CSS personalizzato dopo il file principale di Bootstrap. I seguenti stili sovrascriveranno quelli definiti da Bootstrap:


[class^="col-"] { 
  padding-right: 5px; 
  padding-left: 5px; 
}

In altre parole, la risposta alla domanda fondamentale posta in questo articolo può essere formulata come segue: usa un framework CSS solo se sai esattamente cosa stai facendo.