Share
Nel caso in cui non l'avessi notato, il sito di analisi CSS cssstats.com ha ricevuto una revisione recente. È uno strumento ben progettato che ti offre molte informazioni obiettive sul tuo codice, ma come puoi sfruttare al meglio le statistiche CSS? Per cosa dovresti sparare? Cosa significano e come puoi usarli giorno per giorno?
Oggi parleremo delle best practice, della specificità e della manutenibilità dei CSS, inoltre imparerai come interpretare correttamente e utilizzare meglio le statistiche CSS. Tuffiamoci dentro!
Vai su cssstats.com, inserisci l'url del tuo sito web, il suo foglio di stile o incollalo direttamente nella textarea in fondo e premi Partire.
Una volta analizzato, ti verranno fornite una quantità di statistiche sul CSS; dal numero di regole utilizzate, dalla loro dimensione media, dalle suddivisioni di ogni tipo di dichiarazione, dai colori dei caratteri e dello sfondo, dalle famiglie di caratteri e dimensioni e dai grafici di specificità.
Ecco cosa ti offre CSS Stats, ora vediamo cosa possiamo fare con tutti i dati.
Come sviluppatori front-end, siamo costantemente preoccupati per le prestazioni e l'esperienza utente. Siamo anche responsabili della creazione di software, ma la parola "software" è estranea a molti sviluppatori front-end che provengono da uno sfondo di progettazione. Spesso è facile ignorare le best practice quando stiamo codificando il nostro CSS.
Tuttavia, la verità è che lo sviluppo front-end, proprio come qualsiasi altro sviluppo di software, richiede di concentrarsi sulle migliori pratiche. Le regole per le migliori pratiche sono ampiamente discusse sul web, ma per il bene di questo articolo, ci concentreremo su quella che è probabilmente la pratica più importante in relazione ai CSS: manutenibilità.
La manutenibilità dei centri CSS su molti aspetti diversi.
Non ci immergeremo singolarmente in ciascuno di questi articoli, ma quando parliamo di manutenibilità, ognuna di queste considerazioni influisce sulla manutenibilità complessiva del codice base.
La risposta onesta? Niente, necessariamente. Non si impara nulla sulla manutenibilità semplicemente guardando le statistiche CSS. Devi anche capire il contesto di quel particolare CSS, così come il contesto dello sviluppo attivo.
Il primo modo per analizzare le tue statistiche CSS è cercare segni di aumento dei CSS.
Di gonfiare intendiamo CSS inutilizzati, ridondanti o altrimenti inutili.
Prendiamo, per esempio, un'applicazione di una pagina che ha cinque diversi moduli di contenuto. Quali tipi di statistiche CSS ti aspetteresti che una singola pagina abbia? Una tipica applicazione a pagina singola potrebbe avere una frazione del numero di regole CSS e forse metà del numero di dichiarazioni di colore come un grande sito di pubblicazione di notizie o un'applicazione SAAS sfaccettata.
Se stai vedendo un numero enorme di selettori (ad esempio, se il tuo semplice sito a pagina singola include tanto CSS come un framework Web come Bootstrap, che ha un clock in poco meno di 2400 selettori), è probabile che tu abbia sbagliato qualcosa da qualche parte . Se stai caricando in 30 dimensioni di caratteri e il tuo design richiede 10, è probabile che tu abbia stili inutilizzati, gonfiati o possibilmente incoerenti.
Una possibile eccezione a questa regola, in quanto riguarda la manutenibilità, è se lo sei in realtà usando Bootstrap o un altro framework popolare ben documentato; poiché la documentazione su questi progetti è relativamente profonda e l'utilizzo ha saturato il web, gli sviluppatori front-end non necessariamente mantenere Bootstrap, purché l'origine primaria mantenga le implementazioni core di Bootstrap. Tuttavia, se stai includendo il framework Bootstrap semplicemente per la griglia o alcuni elementi dell'interfaccia utente, dovresti invece creare una versione personalizzata che non includa il CSS aggiuntivo che non hai mai in programma di utilizzare.
È possibile che l'applicazione esegua qualcosa che richiede un numero elevato di selettori, colori o dimensioni dei caratteri. Ad esempio, se stai utilizzando un negozio online che utilizza i colori dei prodotti, è possibile che un numero elevato di colori possa essere visualizzato nel tuo CSS ed essere un caso completamente legittimo. Un altro esempio è se si sta eseguendo un sito che consente agli utenti di selezionare da un elenco di dimensioni e tipi di carattere per il contenuto che creano. In questi esempi, ha senso vedere grandi numeri in quelle particolari categorie.
Medium.com usa una dimensione del font di 301px da qualche parte ... Tuttavia, se stai creando qualcosa come, ad esempio, un blog con una combinazione di colori limitata, le tue statistiche CSS dovrebbero riflettere la selezione dei colori e il conteggio delle dichiarazioni dei font.
Definisci la stessa dimensione del carattere venti volte nel tuo CSS? Molto spesso questo può essere evitato, e di solito è il risultato di una mancanza di pianificazione. Se si determinano le dimensioni dei caratteri prima di scrivere qualsiasi altro CSS, sarà più facile applicare tali dimensioni al resto del sistema.
Lo stesso vale per qualsiasi stile ripetuto; se ti ritrovi a scrivere la stessa cosa più volte, forse quell'insieme di stili merita la propria classe di presentazione o semantica o altra definizione modulare?
Non esagerare qui; ridefinire alcune dimensioni dei caratteri o i colori di sfondo non è un grosso problema. Tuttavia, ridefinire un numero di stili più volte su moduli molto simili potrebbe voler dire che dovresti estendere una classe base. Ad esempio, se hai una classe pulsante:
.btn font-size: 1.2em; font-weight: 400; letter-spacing: .06em; colore: #fff; background-color: # 4a4a4a; imbottitura: 6px 8px;
Supponi di volere una versione blu dello stesso pulsante. Come dovresti andare a definirlo? Se ridefinisci lo stesso btn classe, sarebbe simile a questa:
.btn-blue font-size: 1.2em; font-weight: 400; letter-spacing: .06em; colore: #fff; background-color: # 0C508D; imbottitura: 6px 8px;
Certo, ci sono molti problemi con questo. In primo luogo, viola il principio ASCIUTTO (non ripeterlo). Ma perché importa?? manutenibilità. Diciamo, ad esempio, che il design cambia e richiede un font più piccolo sui pulsanti. Devi quindi entrare nel .btne il .btn-blu classe per cambiare la dimensione del carattere. Ancora più complicazioni si verificano quando hai bisogno di varianti dei pulsanti grigi blu e regolari, come una versione a contorno blu. Tutte le modifiche apportate a qualsiasi pulsante devono essere apportate a molti pulsanti.
Questo è incredibilmente inefficiente. Invece, dovresti approfittare del fatto che le classi sono modulari e ti permettono di definire gli stili dei pulsanti che estendono la tua base .btn classe.
.btn font-size: 1.2em; font-weight: 400; letter-spacing: .06em; colore: #fff; background-color: # 4a4a4a; imbottitura: 6px 8px; .btn.btn-blue background-color: # 0C508D;
Aha! E ora abbiamo una soluzione molto più gestibile, che rimuove anche un numero significativo di linee di CSS e segue il principio DRY.
La specificità è uno degli angoli oscuri del CSS più difficili da comprendere che spesso coinvolge anche gli sviluppatori più esperti. Su CSS Stats, puoi vedere un grafico di specificità che mostra quanto specifici sono i selettori nel tuo CSS, nonché dove questi selettori appaiono.
Specificità CSS dal sito web della BBCQuesto grafico mostra la specificità dei selettori come vengono rilevati nel CSS da bbc.co.uk. Immagina che la parte sinistra del grafico sia la parte superiore del foglio di stile, quindi si sposta lungo il asse x mentre legge il foglio di stile. Più specifica è la regola, più alta è la linea blu scuro sul asse y.
Forniremo tre "regole generali" generali per iniziare con e quindi spiegare le regole.
Ne parleremo più approfonditamente, ma prima parliamo un po 'di come funziona la specificità.
Ai selettori CSS viene assegnato un punteggio di specificità per informare il motore di rendering del browser a quali regole si applicano a quali elementi. Il motivo per cui questo è necessario è anche il motivo per cui i CSS sono così potenti: gli stili possono essere ereditati e sovrapposti in CSS. Ciò significa che puoi applicare più di un set di stili a ogni dato elemento. Il motore di rendering deve consolidare tutte queste regole e presentare qualcosa, ma cosa succede quando vengono impostati due valori diversi per la stessa dichiarazione di stile? Per esempio:
a color: #fff; a.button color: # 000;
Quando il motore CSS incontra un tag con una classe di pulsante, deve determinare se il colore attributo dovrebbe essere #F F F, # 000, o il browser predefinito. La specificità CSS è il set di regole utilizzato dal browser per effettuare questa determinazione.
Quindi, come funziona la specificità? Utilizza questo sistema di punteggio come guida, presa direttamente da Trucchi CSS:
Accentsconagua
!importante trionfa tutti* i selettori ottengono un punteggio di specificità di tutti gli 0.Si noti che in questo sistema di punteggio, quando qualcosa supera 10, non entra nella colonna successiva, quindi ad esempio se si ha un selettore lungo 11 elementi, non si sovrappone a una specificità pari a 0, 0,1,1. Sarebbe invece 0,0,0,11.
Ecco alcuni selettori e i loro punteggi risultanti.
nav li a / * 0,0,0,3 * / .nav-item / * 0,0,1,0 * / nav .nav-item / * 0,0,1,1 * / #logo / * 0,1,0,0 * /
a background-color: blue! important; / * Nell'esempio precedente, abbiamo utilizzato gli stili in linea per impostare il colore di sfondo su rosso. Tuttavia, se applicassimo questo stile con il qualificatore! Important, questo sostituiva lo stile inline. * /
Ok, ora che abbiamo un primer di base per la specificità CSS, come dovrebbe influenzare il nostro codice? Torniamo alle nostre tre regole pratiche per la specificità CSS.
Questa regola afferma essenzialmente che i selettori generali dovrebbero essere all'inizio del CSS e selettori più specifici dovrebbero venire più avanti nel CSS. Le ragioni di questa regola sono molte.
Innanzitutto, posizionare le regole generali all'inizio della tua applicazione di solito imposta lo stage nel tuo codice per creare i moduli di base. In concomitanza con il n. 2, avere gli stili meno specifici all'inizio ti assicura di scrivere prima con la meno specificità possibile. Successivamente, man mano che il codice si evolve, potrebbe essere necessario aggiungere altri stili specifici per sovrascrivere o estendere gli stili precedenti.
Gli stili sul sito Web di Apple sono molto precisi nel foglio di stile
La specificità del framework Pure CSS generalmente aumenta verso la fine del foglio di stileQuesto porta al nostro secondo punto: cosa succede quando il motore di rendering CSS incontra due selettori con lo stesso punteggio? Deve ancora scegliere, quindi opterà per l'ultima delle due regole. Errando il meno specifico all'inizio del file, si sta verificando che le sostituzioni di specificità siano più specifiche man mano che si procede più tardi nel file. Ciò significa che una singola classe più avanti nel file dovrebbe essere considerata in grado di eseguire l'override delle singole classi in precedenza nel file.
Questa pratica garantirà che lo sviluppo successivo sullo stesso progetto possa comprendere rapidamente il sistema a cascata.
Se sei stato uno sviluppatore front-end a lungo, probabilmente hai sperimentato la "guerra specificità CSS". Scrivi un selettore e alcune regole, quindi aggiorna il browser solo per scoprire che le modifiche non sono state applicate. Tu sai dai progetti passati o dalle conversazioni sulla specificità che è perché il tuo selettore non è abbastanza specifico, quindi invece di cercare di rintracciare il problema al selettore che è troppo specifico, decidi di crearne uno nuovo Di Più specifico. Aggiungi un ID o due, e se questo non risolve il problema, butti !importante a esso. E, Ecco - i tuoi stili appaiono.
Questo approccio funziona, tecnicamente parlando; ma sfortunatamente, ogni volta che vuoi estendere questo stile, devi continuare a far crescere la complessità, e prima che tu lo sappia i tuoi selezionatori sono estremamente specifico, e devi ripetere il codice piuttosto che riutilizzare semplicemente le classi. Inoltre, è quasi impossibile determinare esattamente quale livello di specificità dovrebbe avere ogni nuovo stile senza aggiungere sempre più ID e !importante dichiarazioni.
Mantenere i selettori meno specifici è un modo molto più sicuro e manutenibile per gestire i CSS.
Questa regola è in primo luogo in atto per evitare regole stranamente posizionate. Ad esempio, se stai definendo alcune classi per la presentazione del testo e all'improvviso hai una regola che annida sei classi e un ID, quella particolare regola deve essere posizionata contestualmente con selettori più specifici a cui è correlata.
Le statistiche CSS possono fornirti informazioni sul modo in cui il tuo CSS è scritto, ma questo è utile solo se hai un'idea di come dovrebbero apparire queste statistiche prima di provare ad analizzarle. Ciò significa avere una profonda comprensione contestuale del modo in cui il tuo CSS è scritto e perché. Se il tuo CSS è manutenibile e appropriato per il sito su cui è utilizzato, le statistiche di quel CSS non sono una ragione sufficiente per refactoring del tuo codice.
Invece di seguire ciecamente le regole del numero, come sviluppatore front-end responsabile, dovresti concentrarti sul rendere il tuo codice gestibile e ridurre l'espansione. Le statistiche sul tuo codice possono aiutarti a trovare le aree problematiche, ma possono solo andare così lontano.
