Il modo migliore per strutturare un foglio di stile CSS

Question

Sono relativamente nuovo ai CSS e tuttavia mi sembra che abbia ottenuto il linguaggio abbastanza bene per un principiante. Tuttavia, mentre molti dei tutorial che ho letto spesso mettono in guardia su "organizzare e strutturare correttamente il tuo foglio di stile" (e posso sicuramente capire perché ora ho creato alcuni fogli di stile piuttosto lunghi io stesso) non posso per la vita di me trovare alcuna informazione su un formato standardizzato per un foglio di stile o un modello logico per il layout che facilita la successiva lettura umana.

Ad esempio, posso creare una sezione a parentesi per ogni sezione "geografica" della mia pagina (intestazione, riga1, riga2, articolo1 ecc.) E mantenere tutti gli stili per quella sezione all'interno di tali bordi di commento? Il problema sembra quando ho degli stili che vengono riutilizzati in altre sezioni - e metterli sotto una sezione per gli stili a livello di pagina quindi nega lo scopo di raggrupparli per sezione. Allo stesso modo, strutturare il mio foglio di stile raggruppando in base a stili di testo, stili di layout, ecc sembra ancora più confuso.

Esiste una "buona pratica"? So che questo sembra stupido, ma a prescindere da ciò che fai con HTML e CSS, qualcuno è pronto a dirti che è sbagliato, che pratica male o che non è avventato e che sono rimasto confuso. Voglio che il mio codice sia un buon esempio del mio lavoro nel caso in cui un datore di lavoro voglia controllarlo in futuro.

Answer 1

Non sono mai stato effettivamente insegnato, tuttavia posso farvi sapere come organizzo i miei documenti CSS. Come dici tu, mi piace dividerlo in aree "geografiche" ... cioè le regole che si applicano all'intestazione, le barre laterali, il contenuto principale, il piè di pagina, ecc. E poi, di seguito, aggiungo regole molto specifiche , dì se devo disegnare un modulo o un tavolo su una pagina particolare. Infine aggiungo una sezione "General Gubbins" in basso quando aggiungo regole generiche che possono essere applicate su tutta la linea.

Oh sì, mi piace anche aggiungere la tavolozza del designer verso l'alto per una rapida consultazione.

Per esempio ...

/* 
PALETTE: 
dark grey : #555555; 
pink  : #d93575; 
*/ 

/* HEADER */ 
#header {...} 
#header ul {...} 

/* SIDE BAR */ 
#side {...} 
#side ul {....} 

/* CONTENT */ 
#content{...} 
#content p {....} 

/* FOOTER */ 
#footer{...} 
#footer div {....} 

/* FORMS */ 
form {...} 
input {...} 

/* GENERAL GUBBINS */ 
.center {...} 
strong {...} 
floatleft {...} 

Answer 2

Questi ragazzi si consigliano di "Organizza il foglio di stile con una struttura top-down" (http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/). Io uso spesso più fogli di stile. Ad esempio, in MVC è possibile modificare gli stili in base alla vista. In questo modo puoi mettere gli stili specifici della vista in un foglio di stile specifico senza intaccare il tuo 'condiviso' o 'layout'.