Le migliori pratiche per lo stile di pagine Web con i CSS? [chiuso]

È davvero un ARTE scrivere il tuo CSS e potrebbe volerci molto tempo per padroneggiarlo. Tuttavia, ci sono alcune scorciatoie veloci. Fondamentalmente, riutilizzare i modelli esistenti e modificarli leggermente può produrre risultati in meno tempo. Ci sono alcuni strumenti gratuiti per lavorare con i CSS - 50 Strumenti CSS estremamente utili e potenti .

Quindi, avviare da un modello è il modo più semplice e veloce per lo sviluppatore web. Ci sono alcuni buoni siti di template GRATUITI che sono molto utili. Inoltre, ci sono stili di css decenti per pochi dollari. Ecco un elenco di siti di template che preferisco visitare quando è richiesto un buon stile css.

• modelli di css gratuiti
• style shout
• 35 siti Web eccellenti per il download di un modello CSS gratuito
• 100 modelli XHTML / CSS gratuiti di alta qualità
• Modelli gratuiti di 365 CSS

Ecco alcuni punti utili per imparare CSS. Li ho presi dal link W3Tools nel mio commento:

• Google: HTML, CSS e Javascript da zero
• SitePoint
• MDN (rete di sviluppatori di Mozilla)

Esistono diversi approcci, ciascuno con i suoi lati negativi e negativi, e molti di essi sono legati a un particolare flusso di lavoro.

In team di grandi dimensioni, in cui il lavoro è suddiviso in "design grafico", "interaction design", "slicing", "front-end scripting" e "back-end coding", ogni lavoro eseguito da una persona diversa, la parte CSS è il lavoro della persona che fa l'affettatura, e poiché quella persona controlla sia l'HTML che il CSS, possono farlo praticamente come vogliono. Spesso usano strumenti come Dreamweaver; questo permette la modifica WYSIWYG, ma il risultante HTML / CSS è spesso un po 'disordinato e difficile da mantenere - il che è OK se il processo richiede l'impostazione del design in pietra prima di scrivere qualsiasi codice: una volta consegnato ai programmatori, il design non è sta andando a cambiare, quindi non ha molto senso spendere uno sforzo extra sulla manutenibilità.

Spesso, tuttavia, i team sono più piccoli e il sito deve essere più dinamico e più gestibile. In una situazione del genere, è importante scrivere CSS scalabile e adattabile. Ciò che ho trovato funziona abbastanza bene è questo:

• Inizia con alcune regole di 'reset'. Puoi utilizzare un foglio di stile per il ripristino general-purpose pre-scritto (google per loro, ce ne sono un sacco di buoni disponibili in rete) oppure puoi scrivere alcune semplici regole tu stesso. Alcune persone non credono nel reimpostare i fogli di stile; è una questione di gusti e filosofia, quindi potresti voler semplicemente sostituire l'aspetto predefinito di quegli elementi che non ti piacciono.
• Mantieni la tua semantica HTML, cioè scrivila in modo che rifletta la struttura del tuo documento, non l'aspetto. Carica il codice HTML senza alcun foglio di stile. Non deve ancora sembrare come previsto, ma dovrebbe presentarsi in una struttura logica.
• Crea lo stile generale scrivendo regole corrispondenti ai nomi degli elementi ( div , dd , input , a , ...) e, dove necessario, pseudo-elementi / pseudo-classi ( a:hover , a:visited , ...) e selettori di attributo (sono necessari quelli per distinguere tra diversi tipi di input, ad esempio input[type=text] ). Provali su un pezzo generico di HTML, ad es. l'output di link . Questo sarà il tuo aspetto predefinito; la maggior parte del tuo sito dovrebbe avere un bell'aspetto solo con queste regole.
• Ora ci sono alcuni elementi del sito che non sembrano ancora come li vuoi tu. Per quelli, aggiungi nomi di classe che descrivono semanticamente , qual è l'elemento (o un aspetto di ciò che è). Esempi sono cose come <input type="submit" class="default-button"/> , <div class="validation-errors"> , ecc. Non usare nomi di classi per descrivere le proprietà di presentazione ( <span class="red large"> , <div class="float-right"> ): quelli tendono a divergere dalle regole effettive nel tempo, e quindi si finisce con classe float-right flottata a sinistra o alcune assurdità. Stile quegli elementi in base ai loro nomi di classe. Ad esempio, se il tuo pulsante predefinito dovesse essere più grande, dovresti usare .default-button { font-size: larger; } (o una percentuale se ti piacciono di più).
• Evita gli stili incorporati a tutti i costi.

Sviluppa su un browser sensato (firefox o qualsiasi cosa basata sul webkit); una volta che tutto funziona, provalo almeno su Firefox, Webkit e Opera. Probabilmente andrà a rompersi su IE; usa i commenti condizionali per includere fogli di stile aggiuntivi per le varie versioni di IE che devi supportare, aggiungendo tutti gli hack necessari per farlo funzionare.

Per quanto riguarda gli strumenti; non hai davvero bisogno di più di un editor di testo e un browser per testare. Firebug o un plug-in di documento equivalente è di grande aiuto (Google Chrome / Chromium ha uno strumento simile incorporato), soprattutto perché ti permette di modificare stili all'interno del browser: non persistono, ma puoi provare rapidamente le cose per vedere cosa funziona.

Sul lato server, ci sono alcune tecnologie che ti permettono di prendere scorciatoie - in pratica, prendono un foglio di stile scritto in un superset di CSS, aggiungendo cose come variabili, regole nidificate, ecc., e lo trasformano in normali CSS prima di inviarlo al browser. I linguaggi template di cassius e lucius (per Haskell) sono dei buoni esempi, ma esistono soluzioni per molti linguaggi di programmazione.

La maggior parte dei veri sviluppatori web scriverà da zero il proprio CSS e HTML. Gli strumenti possono essere utili per testare o perfezionare le regole CSS, ma qualsiasi cosa pretenda di farlo per te è più un problema che ne vale la pena.

Imparare a utilizzare correttamente HTML e CSS è qualcosa che richiede tempo, proprio come imparare qualsiasi altra tecnologia. Non c'è scorciatoia; la pratica ti porterà lì.

Detto questo, alcuni editor WYSIWYG, come Dreamweaver, supportano la modifica delle regole CSS che fornisce il completamento automatico. Ho trovato questo molto utile quando stavo iniziando (premi Ctrl + Spazio per vedere un elenco di tutte le possibili regole CSS).

Alcune linee guida oltre a tutti gli altri consigli:

1. Utilizza un foglio di stile di ripristino per ottenere lo stesso aspetto e aspetto di base su tutti i browser, ad es. Ripristino HTML5 .
2. Dai agli elementi gli sfondi "brutti" di colore, quando inizi a lavorare con dimensioni / margini / riquadri del riquadro per vedere il funzionamento del modello di box. Aiuta, soprattutto quando si inizia con i CSS.
3. Utilizza alcuni valori generici per il tuo CSS e modifica questi valori usando Firebug o qualcos'altro.
4. Cerca di mantenere il tuo CSS modulare invece di entrare in "guerre di specificità" (hmm, perché il mio stile li.special-class non è applicato? Ah, c'è #my-wrapper li da qualche altra parte). Potresti applicare la SMACSS metodologia o C4S orientato agli oggetti .
5. Non sopravvalutare la necessità dello stesso aspetto su tutti i browser. Offri angoli arrotondati che li capiscano, ma non utilizzare la grafica per servire quelli di IE6. I siti web non sono come riviste, ma più come canali TV.

La maggior parte degli sviluppatori web userà una combinazione di alcuni editor (che si tratti di uno strumento come Dreamweaver o qualcosa di semplice come un blocco note) e un browser web. Passano attraverso un processo di costruzione del markup e delle regole di stile pezzo per pezzo, aggiornando il browser in ogni fase per vedere se guarda e si comporta come intendono. Al di fuori di un editor e di un browser, non ci sono realmente strumenti speciali necessari per lo sviluppo del web frontend, tuttavia esistono strumenti come Firebug che sono estremamente utile.

Sembra che tu abbia bisogno di apprendere correttamente i CSS, quindi puoi scrivere tu stesso. Ci sono un sacco di buoni posti per imparare e fare riferimento su Internet, ma il mio preferito è link .