Come organizzare il sito web CSS [chiuso]

Combinazione di script e compressione al volo

Per .NET uso un un po 'modificato CombinedScriptManager che mi permette di mantenere separati i miei file .css e .js nell'origine e poi lo scriptmanager li afferra tutti e li combina in 1 file e comprime usando il compressore YUI automaticamente al volo.

Sono sicuro che esiste una versione open source di questo file, tuttavia non riesco a trovarlo al momento. Ora può essere una parte di AjaxToolKit.

• link

Tuttavia sono sicuro che potrebbe esserci già qualcosa per qualsiasi linguaggio / framework che stai usando, potrebbe valere la pena dare un'occhiata in giro. Altrimenti, hai la fonte sopra per fare una porta.

Imballaggio con Nant e YUI Compressor

Ci sono anche strumenti là fuori che come parte del tuo script di build per ridurre e comprimere i file .css e .js in 1 file che viene pubblicato sulle tue pagine.

• link

Jin Yang, Web Designer per lo Stack Exchange parla di fogli di stile unificati in episodio 13 del podcast Stack Exchange. Quindi sì, può essere ed è fatto su larga scala.

Puoi avere tutti i file che vuoi. Cerco sempre di avere la stessa organizzazione come te, cioè un file master css e diversi file css "di dominio". Quando assolutamente necessario aggiungo un css per pagine web specifiche, ma raramente è il caso.

La cosa da ricordare è che ci sono strumenti per comprimere i file CSS (e javascript, tra l'altro). Controlla ad esempio il seguente link in cui spiega come usare ant per comprimere (ridimensionare) i tuoi fogli di stile e file scsript: link

L'esecuzione di una tale build ti darà esattamente il file javascript e un grande file css, come se avessi un solo file. Inoltre, il tuo foglio di stile è stato esaminato e duplicazioni o codice inutile sono stati rimossi.

Oltre alla combinazione di file (come gli strumenti di cui sopra, ma anche @include), c'è anche il design stesso che deve essere adattato. Ho trovato diverse cose che vengono fuori:

1. Uso del markup vicino al significato semantico (ul e ol per elenchi, intestazioni appropriate ecc.) e vicino al flusso logico delle cose per rendere più facile la creazione di uno stile coerente.
2. Guarda attentamente il tuo design: quanto è coerente il tuo design? (Più coerente è solitamente più facile da stile)
3. Esiste di solito una distinzione tra stile di navigazione e stile di contenuto primario, puoi separarli facilmente tagliando i normali tag per adattarli al tuo stile di contenuto prima di specificare il margine / riempimento effettivo per ciascun elemento, quindi sostituire tutti i tag necessari nella navigazione selezionandoli con #id. Gli elementi a cui fa riferimento l'ID hanno la precedenza (indipendentemente dall'ordine in cui appaiono nel file.
4. Uso anche elementi non specificati / classificati per creare valori predefiniti utili come * {margine: 0; padding: 0;} Quindi sostituisco il margine / riempimento effettivo per elemento.
5. Puoi utilizzare più classi sugli elementi. Quindi puoi farlo   e farà entrambi gli stili di .title e .bluebackground
6. Utilizza le classi piuttosto che gli ID il più possibile (a causa della specificità ancora)
7. Solitamente separo i colori dai problemi di posizionamento / flusso (poiché i colori tendono a cambiare più spesso e non voglio scavare attraverso tutte le cose del layout - rende più facile cambiare anche i colori)
8. Quando uno stile è veramente necessario solo una volta, puoi ancora inserirlo, non deve essere nel css.
9. Il CSS è solitamente l'arte di portare via le cose e cercare di semplificare e semplificare di più.
10. E infine: lavora con i browser e non contro di loro. Creare uno stile perfetto per i pixel che sembra esattamente lo stesso in ogni browser è destinato a creare mal di testa e molti css, accettando alcune differenze e concentrarsi solo sulla funzionalità generale (quindi se una spaziatura su IE è più o meno 1 px perché usa un modo leggermente diverso di calcolare la larghezza, così sia, se il risultato complessivo funziona ancora, non nasconde o rompe le cose e non sembra brutto, accetterò le differenze.)

Il modo più semplice che ho trovato per tenere traccia dei file CSS è di avere il loro prefisso del nome file uguale alla pagina o una descrizione stringa delle pagine che usano questo file CSS. In questo modo le pagine sono vicine al rispettivo file CSS solo per l'ordinamento alfabetico.

Questa strategia mi ha fatto, e MOLTI sviluppatori di db, mantenere la loro follia. :)

Ora ci sono strumenti disponibili per organizzare script e fogli di stile, ciò di cui hai bisogno dipende totalmente da quale ambiente di sviluppo stai eseguendo. Ciò che è chiaro è che non hai bisogno di mantenere un solo file gigantesco.

Bundling e minification

In un ambiente distribuito si desidera mantenere il numero di richieste che gli utenti eseguono su una pagina Web il più basso possibile. La ragione di questo è che ottieni più velocemente i carichi di pagina se vengono fatte meno richieste.

Tuttavia ciò non significa che sia necessario svilupparlo come un unico file; puoi usare uno strumento di compilazione per concatenare i file sorgente come uno. E una volta che hai uno strumento di compilazione per concatenare potresti anche volerlo minimizzare (in modo che richieda meno byte di invio, che è una buona cosa).

Il modo più semplice per iniziare è scrivere uno script batch o uno script di build che concatena i file ed esegue il file concatenato tramite un minificatore come il compressore YUI. Potrebbero tuttavia già esistere negli strumenti dell'ambiente di sviluppo che lo fanno già.

Lingue superset

Oltre a questo, preferisco utilizzare i linguaggi superset come Meno o Sass / Bussola per creare i miei fogli di stile. Le funzionalità extra che ottieni sono fantastiche, come: variabili, aritmetica, mixin, funzioni di supporto. Una volta che lo usi raramente vuoi tornare a scrivere i css di vaniglia. Qui il processo è lo stesso di sopra, si compila (o si ha lo strumento che osserva le modifiche) l'origine fino al file che alla fine verrà utilizzato.

Esistono anche lingue superset per javascript come coffeescript e dattiloscritto che funzionano allo stesso modo; augment con nuove funzionalità e compilare il file effettivo che verrà utilizzato dal sito web.

I miei strumenti

In MVC4.NET preferisco utilizzare System.Web.Optimizations incorporato funzione di raggruppamento con BundleTransformer così posso utilizzare i linguaggi superset (funziona anche in MVC3 ma richiede alcune configurazioni). È praticamente automatico, puoi vedere le fonti reali mentre lo sviluppo e una volta che il flag di debug è disattivo, compila e ridimensiona automaticamente i file per l'ambiente di produzione.

Uso anche i linguaggi superset in altri ambienti, principalmente quelli più facili da usare:

• nodejs ha uno stilo praticamente nativo per i fogli di stile, e coffeescript è abbastanza facile farlo funzionare
• ruby / rails ha sass / compass in modo nativo e coffeescript è stato supportato dalla community per un lungo periodo

Altri strumenti degni di nota

• compressore YUI - comprime i file javascript e css
• Closure Compiler - compila javascript

Qui. Dove ho parlato della cosa dell'ID e poi ho risposto fondamentalmente a questa domanda:

link

Inoltre, va bene se si tratta solo di un foglio di stile e non a cascata in ogni occasione.