CSS: devo utilizzare un framework?

Short link

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

.