Share
Questo articolo è incentrato sulla struttura del codice CSS, in particolare su un metodo che ho utilizzato negli ultimi anni per portare un po 'di logica e coerenza nell'ordine in cui scrivo il mio CSS. È un metodo che chiamo "Outside In".
Ho sentito parlare di vari approcci per scrivere CSS in passato. Alcune persone non usano alcun ordine particolare, altre alfabetizzano le dichiarazioni per nome della proprietà, ho persino sentito parlare di una manciata di casi in cui alcuni li ordinano visivamente per la lunghezza di ciascuno costo dell'immobile paio!
Un precedente sondaggio su CSS-Tricks ha posto questa domanda con un risultato che ho trovato abbastanza sorprendente: il 39% di oltre 11.000 persone non ha un piano specifico quando si tratta di ordinare i CSS.
Come si ordinano le proprietà CSS? Elettori totali: 11.093Raggruppamento per tipo potrebbe suggerire altezza essere accanto a larghezza. In ordine alfabetico vedrebbe le dichiarazioni elencate da sfondo attraverso z-index, per esempio.
Io uso il metodo di raggruppare le proprietà per tipo - anche se uso anche un ordine specifico per ordinare per gruppo!
Ad eccezione del "metodo casuale", esiste un certo grado di ordine in tutti gli altri approcci. Ma quell'ordine non si adatta necessariamente a qualcosa di particolarmente utile per quanto riguarda lo stile dei siti web.
Se stavi raccogliendo dati sull'altezza degli studenti in una classe, ordinarli con una misurazione della lunghezza ha senso. Se stai categorizzando una collezione di DVD, l'ordinamento alfabetico potrebbe avere senso. Ma le proprietà CSS ordinate in questi modi hanno qualcosa a che fare con il loro ordine di importanza quando quegli stili sono dipinti dal browser?
Se ordinate alfabeticamente, è un elemento colore più importante del suo larghezza? È un elemento stile del bordo più importante del fatto che sia o meno nel normale flusso del documento? Direi di no.
Il metodo che ho imparato ad amare ordina le proprietà CSS in base all'impatto che hanno sugli elementi selezionati o su altri elementi che li circondano. L'essenza della tecnica è di iniziare con le proprietà delle grandi immagini che hanno un impatto sulle cose al di fuori dell'elemento e lavorano verso i dettagli più fini. Questo è il motivo per cui lo chiamo il metodo "Outside In".
posizione e galleggiante le dichiarazioni rimuovono gli elementi dal loro flusso normale e hanno un impatto enorme sugli altri elementi che li circondano. Questo è qualcosa di importante e penso che dovrebbe essere chiarito proprio all'inizio di un blocco di CSS.
Controllando cose come il cursore o straripamento di un elemento sono (di solito) meno importanti e quindi tendo a lasciare cose come questa verso la fine.
L'ordine che uso è il seguente:
Accentsconagua
posizione, galleggiante, chiaro, display)larghezza, altezza, margine, imbottitura)colore, sfondo, confine, box-ombra)dimensione del font, famiglia di font, text-align, text-transform)cursore, straripamento, z-index)lo so confine è una proprietà box-model e z-index è legato alla posizione, ma questo ordine funziona per me. Anche se non mi piace l'ordinamento alfabetico, c'è qualcosa che sembra giusto nel mettere z-index alla fine…
Prendiamo l'esempio dello stile di un modulo pulsante.
Iniziamo con un nome di classe bello e significativo come .pulsante. Personalmente non mi piacciono i nomi contratti come .btn e tendono a preferire nomi di classi lunghi e descrittivi laddove possibile - è solo una preferenza personale, YMMV :)
/ * Ordina ora → * / .button
Vogliamo essere in grado di manipolare la spaziatura verticale attorno al pulsante, quindi sarà necessario modificare il display a partire dal in linea (l'impostazione predefinita per i collegamenti di ancoraggio) a inline-block.
Per consentire al pulsante di aumentare in larghezza a seconda del contenuto del testo, inline-block è una scelta più flessibile di galleggiante con un larghezza impostato.
.pulsante display: blocco in linea;
Successivamente, avremo bisogno di aggiungere alcune caratteristiche del modello a scatola come margine e riempimento. Il margine va fuori dagli schemi quindi, andando "Outside In", questo dovrebbe venire prima.
.pulsante display: blocco in linea; margine: 1em 0; imbottitura: 1em 4em;
Le prossime cose da aggiungere sono i colori. Per separare ogni gruppo di tipi di proprietà, mi piace lasciare una riga vuota - questo fa sì che ogni sezione si distingua molto di più.
.pulsante display: blocco in linea; margine: 1em 0; imbottitura: 0,5em 3em; color: #fff; background: # 196e76;
Successivamente possiamo aggiungere i bordi e le ombre per fornire una certa profondità, seguita da eventuali proprietà tipografiche, ancora separate da una riga vuota.
.pulsante display: blocco in linea; margine: 1em 0; imbottitura: 1em 4em; color: #fff; background: # 196e76; border: 0.25em solid # 196e76; box-shadow: inset 0.25em 0.25em 0.5em rgba (0,0,0,0.3), 0.5em 0.5em 0 # 444; font-size: 3em; famiglia di font: Avenir, Helvetica, Arial, sans-serif; text-align: center; text-transform: uppercase; text-decoration: none;
Un vantaggio di avere un sistema come questo è che elimina la necessità di pensare troppo una volta che è stato implementato. Se sto leggendo il mio codice e voglio cambiare qualcosa di grande come quello di un elemento larghezza o posizione, So che guarderò verso la cima di una regola. Se voglio regolare qualcosa del genere text-transform o list-style, Guardo verso il fondo del blocco.
Avere il codice strutturato in questo modo è anche molto utile per gli altri che leggono il CSS; se di fronte a un codice organizzato come questo, è molto facile vedere tutte le parti dei componenti che costituiscono un modulo di pulsanti. Quando si scrive codice, è importante renderlo il più semplice possibile ai nostri colleghi sviluppatori; questo rende il codice più facile da capire e da mantenere.
Ho usato vanilla CSS per spiegare i miei metodi qui, ma puoi applicare l'approccio "Outside In" altrettanto efficacemente nel tuo Sass, LESS e Stylus.
La codifica può essere una cosa molto personale. Se usi un metodo diverso per organizzare il tuo CSS, sarebbe bello sentirlo! Lascia un commento per continuare la discussione.
