Organizzazione/struttura CSS

Question

Ho lavorato per trovare il modo migliore per organizzare il codice CSS, soprattutto su siti più grandi. Sono meno interessato a scrivere stile e più a come le persone strutturano e gestiscono il loro codice.

ho seguito questa struttura che mi sento funziona piuttosto bene per la manutenibilità, ma ho voluto ottenere il vostro parere su questo e sentire gli altri metodi:

/*======================================= 
1. =reset 
=======================================*/ 
/** 
Anything but * reset 
**/ 

/*======================================= 
2. =base 
=======================================*/ 
/** 
Base rules so naked HTML has basic style and displays consistently x-browser 
**/ 

/*======================================= 
3. =base forms 
=======================================*/ 
/** 
Base form framework 
**/ 

/*======================================= 
4. =base site 
=======================================*/ 
/** 
Rules common across the majority of pages 
e.g. header, footer, main columns, navigation, search bar etc. 
**/ 

/*======================================= 
5. =recurring styles 
=======================================*/ 
/** 
Re-useable snippets -- not to include positioning/structure etc. 
e.g. buttons, icons etc. 
**/ 

/*======================================= 
6. =recurring modules 
=======================================*/ 
/** 
Re-usable modules common to multiple pages/views but not majority 
e.g. a product carousel could be on the homepage as well as the product page and maybe even the checkout page etc. 
**/ 

/*======================================= 
7. =homepage 
=======================================*/ 
/** 
contains rules only applicable to homepage 
**/ 

/*======================================= 
8. =about page 
=======================================*/ 
/** 
contains rules only applicable to about page 
**/ 

/*======================================= 
9. =contact page 
=======================================*/ 
/** 
contains rules only applicable to contact page 
**/ 

...and so on 

Ogni pensiero sarebbe molto apprezzato.

Rich

Answer 1

le divisioni specificate guardare bene - Io suggerirei di mantenere ogni sezione in un file reset.css base.css forms.css - si può facilmente combinare i file durante la distribuzione utilizzando http://developer.yahoo.com/yui/compressor/. Aiuta a mantenere il css un po 'più piccolo durante lo sviluppo.

Answer 2

Io uso SASS e organizzare tutti che i file utilizzando un unico file (quindi potrebbe essere incluso in un altro). Ha senso, perché so sempre dove cercare una cosa specifica e le persone non si confondono sfogliando un lungo singolo file css. Così disciplina le altre persone a non lasciare "finestre rotte".

Answer 3

Ho affrontato lo stesso problema. Eseguo ricerche sul Web senza trovare una risposta definitiva.

Alla fine ho estratto il mio file CSS comune simile al layout css. Quindi inserisco i css delle pagine specifiche della pagina nei loro file. Perché ingombrare il common.css, con css specifici della pagina. Molti articoli/post erano preoccupati che troppi file avrebbero rallentato il sito a causa delle connessioni aperte del browser. Mentre riconosco che questo potrebbe essere un problema, lo affronterò quando diventerà uno. Come indicato in una delle altre risposte, posso sempre unire e comprimere il css alla distribuzione.

Answer 4

Il mio progetto attuale è una grande applicazione SAAS che ha una tonnellata di css da affrontare. Preferisco tenere il mio in un unico file, non solo per la velocità di caricamento, ma anche per ridurre al minimo la quantità di volte che devo saltare quando sto modificando ... in più, non c'è bisogno di affrontare le stranezze di YUI. Il mio precedente datore di lavoro è stato standardizzato su YUI e l'abbiamo usato ampiamente ... funziona, ma può diventare davvero goffo in fretta.

Per quanto riguarda la struttura, interrompo il mio codice un po 'di più. Comincio con le dichiarazioni principali come */body/html/H1/P ecc. Quindi, faccio una sezione per i contenuti specifici per la testa. Seguilo con una sezione generale del corpo, con sottosezioni per ogni pagina che potrebbe avere contenuti specifici. Chiudo con una sezione specifica del footer. Trovo che se lo strutturo logicamente mentre la pagina è costruita, almeno ho un'idea su dove cercare - intestazione in alto, piè di pagina in fondo, ecc. E, posso passare dal codice al test locale per implementare in due sequenze di tasti.

Attenzione alla minificazione su CSS. Certo, funziona. Ma nel caso del mio ultimo contratto, stavamo lavorando su siti che in alcuni casi sono cambiati quasi quotidianamente e un'analisi commerciale ha rivelato che avremmo bruciato più risorse aziendali minime e non minime di quelle che ci avrebbero giovato solo dalla costruzione di css semplici e puliti . Finché si memorizza nella cache e non carichi multipli multipli di file CSS, sei a posto. Nella situazione di quel lavoro, 1 pagina in particolare riceveva 1 milione di visitatori unici al giorno, e il gruppo di lavoro era buono, mantenendolo non compresso, nonostante un potenziale risparmio di 5 gb al giorno con un miglioramento di 5k dal minisito. La larghezza di banda è più economica rispetto agli ingegneri UI, suppongo ....

Answer 5

Il mio formato di base è un commento di blocco in alto e immersioni nelle principali regioni con commenti di intestazione (simili ai tuoi).

/* 
* Title of the site 
* Author 
* Date created 
* Last updated 
* 
* 1-2 line description of what the style sheet is for. 
* 
*/ 


/* Reset (probably imported) 
-------------------------------------------------------------------------------- */ 
... 


/* A Framework (probably imported) 
-------------------------------------------------------------------------------- */ 
I like YUI Grids 


/* Global 
-------------------------------------------------------------------------------- */ 
Styles for basic elements like: body, h1-h6, p, ul, li, ..., and often a wrapper. 


/* Header 
-------------------------------------------------------------------------------- */ 
Any styles specifically for the header block (this is usually short) 


/* Body 
-------------------------------------------------------------------------------- */ 
Basic layout for the main body block 


/* Footer 
-------------------------------------------------------------------------------- */ 
Similar to header 


/* Utility Classes 
-------------------------------------------------------------------------------- */ 
Things like 
.align-center { text-align: center; }; 
.hide { display: none !important; } 
... 


/* Specific Pages 
-------------------------------------------------------------------------------- */ 
Those are my usual subsections (separated by 2 line breaks). Beyond that, short 
rules that only apply to a certain page or subset of pages will get a section like 
this. 

Un paio di consigli:.

discendenti trattino sottosezioni specifiche *

div#left-col { ... } 

    * html #left-col { ... } 

    #left-col p { ... } 

    #left-col ul { ... } 

     * html #left-col ul { ... } 

     #left-col li { ... } 

* Ma keep rules efficient con il numero di discendenti inclusi in un selettore. In genere, vorrei scrivere:

div#left-col li span { font-weight: bold; } 

invece di:

div#left-col ul li a span { font-weight: bold; } 

Ricordate che questo sta cambiando proprio ciò che la regola seleziona, ma fintanto che funziona per le vostre pagine ed è gestibile, è ok .

Alphabetize proprietà.

body { 
    color: #ccc; 
    font-family: Helvetica, Arial, sans-serif; 
    padding: 2em; 
    -webkit-something: some value; 
} 

Collapse brevi regole a 1 linea (se non fa male manutenibilità).

div#left { float: left; margin-top: 30px; width: 300px; }