Share
Certo, chiunque può scrivere CSS. Anche i programmi lo stanno facendo per te ora. Ma il CSS è buono? Ecco 5 consigli per iniziare a migliorare il tuo.
Sul serio, usa sempre un reset di qualche tipo. Sia che tu stia utilizzando Reimposta Eric Meyer, Reimposta YUI o il tuo reset personalizzato, usa solo qualcosa.
Può essere semplice come rimuovere il margine e il riempimento da tutti gli elementi:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, forma, fieldset, tabella, th, td margine: 0; padding: 0;
Eric Meyer e YUI Resets sono fantastici, ma per me sono troppo esagerati. Ho l'impressione che tu finisca per reimpostare tutto e quindi ridefinire molte proprietà sugli elementi. Questo è il motivo per cui Eric Meyer ti consiglia di non limitarti a prendere il suo foglio di stile di reset e di lasciarlo cadere nei tuoi progetti se esiste un modo più efficace di usarlo. Modificalo. Costruiscilo. Falla tua.
Oh e per favore, basta questo:
* margine: 0; padding: 0;
Ci vuole più tempo per elaborare e cosa pensi che dovrebbe accadere a un pulsante di opzione quando togli il padding? Gli elementi del modulo possono a volte fare cose funky, quindi potrebbe essere meglio lasciarne solo alcuni.
Quale esempio penseresti sia più veloce trova la proprietà margin-right?
div # header h1 z-index: 101; colore: # 000; posizione: relativa; altezza della linea: 24px; margin-right: 48px; border-bottom: 1px solid #dedede; font-size: 18px;
div # header h1 border-bottom: 1px solid #dedede; colore: # 000; font-size: 18px; altezza della linea: 24px; margin-right: 48px; posizione: relativa; z-index: 101;
Non puoi dirmi che l'Esempio 2 non è più veloce. Alfabetizzando le tue proprietà, stai creando questa coerenza che ti aiuterà a ridurre il tempo speso a cercare una proprietà specifica.
Conosco alcune persone che organizzano un modo e altri che ne organizzano un altro, ma nella mia azienda abbiamo preso una decisione consensuale per organizzare tutti in ordine alfabetico. Ha sicuramente aiutato quando si lavora con il codice di altre persone. Mi rabbioso ogni volta che vado in un foglio di stile in cui le proprietà non sono ordinate alfabeticamente.
Dovresti organizzare il tuo foglio di stile in modo che sia facile trovare le cose e gli articoli correlati siano vicini. Utilizzare i commenti in modo efficace. Ad esempio, questo è il modo in cui strutturo i miei fogli di stile:
/ ***** Reimposta ***** / Rimuovi margine e riempimento da elementi / ***** Elementi base ***** / Definisci stili per elementi base: corpo, h1-h6, ul, ol, a , p, ecc. / ***** Classi generiche ***** / Definire stili per cose semplici come fluttuare ai lati, rimuovere un margine inferiore sugli elementi, ecc. Sì, questi potrebbero non essere così semantici come faremmo tutti come, ma sono necessari per la codifica in modo efficiente / ***** Layout di base ***** / Definire il modello di base: intestazione, piè di pagina, ecc. Elementi che aiutano a definire il layout di base del sito / **** * Intestazione ***** / Definisci tutti gli elementi nell'intestazione / ***** Contenuto ***** / Definisci tutti gli elementi nell'area contenuto / ***** Footer ***** / Definisci tutti gli elementi nel footer / ***** Etc ***** / Continua a definire le altre sezioni una per una
Utilizzando commenti e raggruppando elementi simili, diventa molto più veloce trovare ciò che stai cercando.
Qualunque sia il modo in cui decidi di codificare, segui questo. Sono malato e stanco dell'intera linea 1 contro più righe per il tuo dibattito sui CSS. Non c'è dibattito! Ognuno ha la propria opinione, quindi scegli ciò che funziona per te e seguilo nel foglio di stile.
Personalmente, io uso una combinazione di entrambi. Se un selettore avrà più di 3 proprietà, lo romperò su più righe:
div # header float: left; larghezza: 100%; div # header div.column border-right: 1px solid #ccc; float: giusto; margin-right: 50px; imbottitura: 10px; larghezza: 300 px; div # header h1 float: left; posizione: relativa; larghezza: 250 px;
Funziona per me perché 3 proprietà riguardano ciò che si adatta a 1 riga nel mio editor di testo prima di eseguire il wrapping su un'altra linea. Quindi, capisci cosa funziona per te ed essere coerente.
Non osare toccare il tuo foglio di stile fino a quando non hai scritto il tuo markup!
Quando mi sto preparando per suddividere un sito, passo e segnalo l'intero documento dal tag del corpo di apertura al tag body di chiusura, prima ancora di creare un file CSS. Non aggiungo nessun div superfluo, ID o classi. Aggiungerò alcune div generiche come header, content, footer perché so che queste cose stanno per esistere.
Annunciando innanzitutto il documento, non si imbatteranno in malattie come la divitis e la classite, che a volte possono essere fatali! Hai solo bisogno di aggiungere quelle cose una volta che hai iniziato a scrivere il CSS e ti rendi conto che avrai bisogno di un altro gancio per realizzare ciò che stai cercando di ottenere.
Utilizzare i selettori discendenti del CSS per scegliere come target elementi figli; non aggiungere semplicemente una classe o un id all'elemento. Ricorda, I CSS non hanno valore senza un documento ben formattato.
* Nota dell'editore: non posso sottolineare abbastanza questo punto. Come ha detto Trevor, non toccare nemmeno il file CSS fino a quando il markup non è completo al 100%.
Questi sono solo alcuni dei suggerimenti che mi aiutano a scrivere codice migliore. Questa non è affatto la fine della lista. Quando andrò con gli altri, condividerò.
Che suggerimenti hai per scrivere CSS migliori?
Accentsconagua