10 migliori pratiche CSS per migliorare il tuo codice
È davvero facile trovarti a chiedermi come mai il tuo CSS sia diventato un tale casino.
A volte è il risultato di una codifica scadente fin dall'inizio, a volte è a causa di più hack e modifiche nel tempo.
Qualunque sia la causa, non deve essere così. Scrivere CSS puliti e super-gestibili è semplice quando inizi con il piede giusto e rendi il tuo codice più facile da mantenere e modificare in seguito.
Ecco 11 suggerimenti per accelerare il processo, scrivendo CSS che è più sottile, più veloce e meno probabilità di darti un mal di testa.
1. Stay Organized
Proprio come qualsiasi altra cosa, vale la pena organizzarsi. Piuttosto che cadere a casaccio in classi di id e nell'ordine in cui vengono in mente, usa una struttura coerente.
Ti aiuterà a tenere a mente la parte a cascata dei CSS e imposta il tuo foglio di stile in modo da sfruttare l'ereditarietà dello stile.
Dichiarare prima gli articoli più generici, quindi i non-generici e così via. Ciò consente al tuo CSS di ereditare correttamente gli attributi e rende molto più semplice per te sostituire uno stile specifico quando necessario. Sarai più veloce a modificare il tuo CSS in un secondo momento perché seguirà una struttura logica di facile lettura.
Utilizza una struttura che funzioni al meglio per te, tenendo presenti le modifiche future e altri sviluppatori.
- Reimposta e sostituisce
- Link e tipo
- Layout principale
- Strutture di layout secondarie
- Elementi del modulo
- miscellaneo
2. Titolo, data e firma
Fai sapere agli altri chi ha scritto il tuo CSS, quando è stato scritto e chi contattare se hanno domande a riguardo. Ciò è particolarmente utile quando si progettano modelli o temi.
Aspetta un attimo ... qual è quel pezzo di colori campione ? Nel corso degli anni, ho notato che aggiungere un semplice elenco di colori comuni usati nei miei fogli di stile è estremamente utile durante lo sviluppo iniziale e quando si effettuano le modifiche in un secondo momento.
Ciò ti evita di dover aprire Photoshop per campionare un colore dal design o cercare i colori nel sito guida di stile (se ne ha uno). Quando hai bisogno del codice HTML per quel blu specifico, basta scorrere verso l'alto e copiarlo.
3. Conserva una libreria di modelli
Una volta che hai scelto una struttura da utilizzare, elimina tutto ciò che non è generico e salva il file come modello CSS per un uso futuro.
È possibile salvare più versioni per più usi: un layout a due colonne, un layout di blog, stampa, mobile e così via. Coda (l'editor per OSX) ha una fantastica funzione Clip che ti permette di farlo facilmente. Molti altri editor hanno una funzionalità simile, ma anche un semplice batch di file di testo funzionerà correttamente.
È folle riscrivere tutti e tre i fogli di stile da zero, soprattutto quando si utilizzano le stesse convenzioni e metodologie in ciascuno di essi.
4. Utilizzare le convenzioni di denominazione utili
Noterai sopra dove ho dichiarato un paio di id di colonna e li ho chiamati col-alpha e col-beta. Perché non chiamarli col-left e col-right? Pensa alle modifiche future, sempre.
L'anno prossimo potresti dover riprogettare il tuo sito e spostare quella colonna a sinistra verso destra. Non dovresti dover rinominare l'elemento nel tuo codice HTML e rinominare l'id nel tuo foglio di stile solo per cambiare la sua posizione.
Certo, potresti semplicemente riposizionare quella colonna sinistra a destra e mantenere l'ID come # col-left, ma quanto è confuso? Se l'ID dice sinistra, ci si dovrebbe aspettare che sia sempre sulla sinistra. Questo non ti lascia molto spazio per spostare le cose in seguito.
Uno dei principali vantaggi del CSS è la possibilità di separare gli stili dal contenuto. Puoi totalmente ridisegnare il tuo sito semplicemente modificando il CSS senza mai toccare l'HTML. Quindi non far esplodere il tuo CSS usando nomi limitanti . Utilizzare convenzioni di denominazione più versatili e rimanere coerenti.
Lasciare le parole specifiche per la posizione o lo stile al di fuori dei tuoi stili e id. Una classe di .link-blue renderà più lavoro per te, o renderà il tuo foglio di stile davvero disordinato quando il tuo cliente ti chiederà in seguito di cambiare quei collegamenti blu con l'arancione.
Dai un nome ai tuoi elementi in base a ciò che sono, non come sono. Ad esempio, .comment-blue è molto meno versatile di .comment-beta e .post-largefont è più limitante di .post-title.
5. I trattini anziché i caratteri di sottolineatura
I browser più vecchi amano ottenere glitch con i caratteri di sottolineatura in CSS, o non li supportano affatto. Per una migliore retrocompatibilità, prendi invece l'abitudine di usare i trattini. Usa # col-alpha piuttosto che #col_alpha.
6. Non ripetere te stesso
Riutilizzare gli attributi quando possibile raggruppando gli elementi invece di dichiarare di nuovo gli stili. Se i tuoi elementi h1 e h2 usano entrambi la stessa dimensione, colore e margini, raggruppali usando una virgola.
Questo:
Dovresti inoltre utilizzare scorciatoie quando possibile. Stai sempre alla ricerca di opportunità per raggruppare elementi e utilizzare scorciatoie per le dichiarazioni.
Puoi realizzare tutto questo:
con solo questo:
È molto importante capire l'ordine in cui i CSS interpretano queste scorciatoie: in alto, a destra, in basso, a sinistra. Un grande cerchio orario, a partire da mezzogiorno.
Inoltre, se gli attributi superiore, inferiore, sinistro e destro sono gli stessi, devi solo usarne due:
Imposta i margini superiore e inferiore su 1em e i margini sinistro e destro su 0.
7. Ottimizza per fogli stile leggero
Utilizzando i suggerimenti di cui sopra, puoi davvero ridurre le dimensioni dei tuoi fogli di stile. Carichi più piccoli più veloci e più piccoli è più facile da mantenere e aggiornare.
Ritaglia quello che non ti serve e consolidalo laddove possibile raggruppando. Prestare attenzione quando si utilizzano anche framework CSS predefiniti. Probabilmente erediterai un sacco di ingombro che non verrà utilizzato.
Un altro consiglio rapido per CSS sottile: non è necessario specificare un'unità di misura quando si utilizza lo zero. Se un margine è impostato su 0, non è necessario specificare 0px o 0em. Lo zero è zero indipendentemente dall'unità di misura e il CSS lo comprende.
8. Scrivi la tua base per Gecko, poi Tweak per Webkit e IE
Risparmia te stesso sulla risoluzione dei problemi e scrivi CSS per i browser Gecko (Firefox, Mozilla, Netscape, Flock, Camino). Se il tuo CSS funziona correttamente con Gecko, è molto più probabile che sia privo di problemi in Webkit (Safari, Chrome) e Internet Explorer.
9. Convalida
Utilizzare Il validatore CSS gratuito di W3C . Se sei bloccato e il tuo layout non sta facendo quello che vuoi che faccia, il validatore CSS sarà di grande aiuto nel segnalare errori.
10. Tieni una casa in ordine
Separa il CSS specifico del browser per il proprio foglio di stile e includi, se necessario, con Javascript, codice lato server o commenti condizionali . Usa questo metodo per evitare gli hacker CSS sporchi nei tuoi fogli di stile principali. Ciò manterrà il tuo CSS di base pulito e gestibile.
Scritto esclusivamente per WDD da Jeff Couturier
Segui questi metodi durante la codifica dei tuoi siti web? Quali altre tecniche usi per creare codice migliore?