Migliori pratiche CSS: nove segni di un CSS errato

CSS o fogli di stile a cascata: il linguaggio che definisce l'aspetto e talvolta il comportamento di una pagina Web. È spesso trascurato dagli sviluppatori web come un linguaggio "facile" che non richiede troppa attenzione. Memorizzare alcune delle proprietà più comuni, il flusso generale e cercare su Google proprietà più oscure è la strada da percorrere. Ma, come sanno gli sviluppatori più esperti, nessuna lingua merita di essere trascurata poiché ci sono sempre modi buoni e cattivi per fare qualcosa.

Con i CSS, è molto facile fare le cose nel modo sbagliato in quanto non esiste un compilatore che genera errori, non ci sono avvertimenti o avvisi per cattive implementazioni. Un linguaggio di programmazione come JavaScript ha un sacco di strumenti che tracciano una buona qualità del codice, alcuni addirittura lanciano messaggi allo sviluppatore che una certa funzione non è stata implementata nel modo giusto.

In questo post relativamente breve vedremo alcuni dei problemi comuni che gli sviluppatori devono affrontare e come risolverli. Non si tratta di dettagli implementativi specifici per un componente visivo specifico. Invece, l'elenco si concentra su processi di pensiero, architettura e approcci.

La complessità CSS

CSS è difficile? No! Sicuramente no, ha poche regole strutturali di base. Hai selettori (classe, id, elemento), hai proprietà e hai ambito. È molto meno di un linguaggio come C, Java o PHP. Uno sviluppatore può ottenere l'intera idea in pochi minuti di lettura e avvio dello styling. Certo, per conoscere la differenza tra margin e padding, puoi dare un'occhiata a w3schools, ma quando usarlo richiederà un po 'di esperienza. Ma non è scienza missilistica.

Ora, ciò che rende le cose un po 'più complesse sono tutti i modi in cui corrono i selettori per sovrascrivere il successivo e come una proprietà influisce su un'altra (display: block vs display: inline per esempio). Quindi abbiamo dettagli più piccoli come il collasso del margine, lo stacking z-index, le proprietà delle prestazioni della GPU e della CPU, il modello box e le proprietà tipografiche.

Oltre a tutto ciò, le nuove funzionalità CSS che non sono sempre implementate allo stesso modo nei browser, alcune addirittura non sono implementate affatto e altre richiedono proprietà diverse.

Se guardiamo i due paragrafi precedenti, vedremo le due fasi principali che gli sviluppatori front-end raggiungono quando lavorano con i CSS: uno è il " Oh, è tutto? "E il secondo è" Oh ****, non era tutto ". Questo è ciò che significa "Complessità CSS"

Ci sono un sacco di piccole cose intrecciate che sono difficili da scalare. Se costruisci un solo componente, è facile: dai uno stile a tutto ciò che vedi e funziona. Ma metti quel singolo componente in un'applicazione più ampia e verranno applicati stili aggiuntivi. Potresti ritrovarti con la stessa classe di qualcos'altro (come .button) e i tuoi stili verranno applicati all'intera applicazione, rompendo tutto. È stressante!

WordPress CSS: guida di base per principianti

Come scrivere CSS: combattere la sua complessità

Ci sono alcune soluzioni che le persone intelligenti hanno escogitato, una panoramica potrebbe essere:

• Convenzioni di denominazione CSS come BEM, SMACSS e altre, che definiscono regole dei nomi di classe che ridurrebbe la possibilità di conflitti.
• CSS in JS è un metodo più recente che praticamente ti consente di scrivere componenti CSS nei file JS (suona male, sembra male, ma almeno ha un senso). Per lo più valido con React, Vue e altri.
• CSS Modules è un approccio più sensato ai CSS in JS per qualcuno che finisce con tutti gli stili in un file. I moduli CSS incapsulano gli stili di ogni componente in modo che non possano passare ad altri componenti, rendendo la riusabilità molto più semplice. Inoltre riduce di molto lo stress!

Il primo: le convenzioni di denominazione sono probabilmente le più difficili da implementare in quanto non hanno strumenti per aiutarti. In quanto sviluppatore, spetta a te capire e applicare la convenzione. Devi ancora pensare ai nomi delle classi, non dovrebbero ancora scontrarsi e poi devi farlo seguire a tutta la squadra. Piuttosto difficile!

CSS in JS e moduli CSS sono correzioni implementative. Cambiano l'output del codice nel suo insieme, il che rende praticamente impossibile la perdita di stili. Ma richiedono un pensiero completamente diverso e una configurazione di costruzione, qualcosa che non è sempre fattibile o desiderato.

Il miglior consiglio qui sarebbe: studia le convenzioni di denominazione più comuni e di successo, usa quella che si adatta agli standard di codifica della tua azienda o dell'ecosistema. Comprendi la separazione dei componenti e inizia a pensare in termini di ambito e unità singolari che creano un'app di grandi dimensioni. Non è un'app di grandi dimensioni dall'inizio, sarebbe impossibile da gestire.

Se stai lavorando su uno stack che include una libreria come React o un framework come Vue, cerca strumenti aggiuntivi che ti consentono di gestire i tuoi stili con essi. Per qualsiasi sviluppatore CSS di livello da principiante a intermedio, sarebbero un grande aiuto! E potresti non voler mai abbandonarli a meno che qualcosa di meglio non ti venga incontro.

Tieni d'occhio i nuovi strumenti! Ci impediscono di combattere i problemi che la comunità degli sviluppatori ha già trovato, risolto e fornito un modo per risolverli.

Ora che abbiamo delineato il significato della complessità CSS e alcuni suggerimenti per combatterla, tuffiamoci in una panoramica più dettagliata e forniamo esempi diretti.

Suggerimenti per la progettazione di siti Web: come migliorare il tuo gioco nel web design

Nove segni di un cattivo CSS

Questo elenco non è sicuramente completo, non per un lungo miglio. Purtroppo, dovrai affrontare innumerevoli altri problemi e, si spera, trovare soluzioni dirette a un problema specifico in siti come Stackoverflow.
Tuttavia, se vuoi migliorare il tuo gioco, quando risolvi un problema con poche righe di CSS, devi capire cosa fanno. Perché hai dovuto modificare il tuo markup e perché hai dovuto modificare alcuni selettori, proprietà?

I margini si comportano in modo strano

Un problema comune che gli sviluppatori devono affrontare è quando due elementi non sommano i loro margini (alto / basso). Ad esempio, abbiamo due elementi <p> ​​con margine: 20px 0 ;. Lo spazio totale tra di loro è 20 px, non 40. Ciò è dovuto al collasso del margine. Tranne se gli elementi fluttuano o sono assolutamente posizionati. Questo "tranne" è quasi ovunque per quasi tutte le definizioni.

Z-index: 9999999 e ancora non sopra z-index: 1

Prima di tutto, è raro che sia necessario scrivere indici z così alti. Ho anche visto valori come 99999999999999 o più. Innanzitutto, il valore massimo dello z-index è 2147483647, quindi qualsiasi cosa sopra è inutile. Secondo, non funziona così. Quali elementi sono in cima è definito dal contesto di impilamento, non solo dal valore z-index. Vedi il grafico sotto:

Non animare le proprietà giuste

È una domanda piuttosto semplice, ma alcuni sviluppatori hanno difficoltà quando si tratta di animazioni e di approccio da adottare. Primo, cosa può essere animato? Tutto ciò che può avere un valore iniziale, un valore finale e qualsiasi altra via di mezzo. L'opacità è una proprietà di questo tipo, puoi iniziare da 0, terminare con 1 e aggiungere infiniti passaggi tra 0,3, 0,6758, 0,9875 ecc. Non puoi animare la "visualizzazione" perché non ci sono passaggi intermedi tra inline e griglia.

Animazioni inefficienti

Il motivo più comune per un cattivo FPS sulle animazioni è dovuto all'animazione delle proprietà sbagliate. Se modifichi la proprietà "sinistra" di un elemento assoluto, utilizzerai la CPU per il calcolo. Tuttavia, se usi la trasformazione, allora sarebbe la GPU. E la GPU come tutti sappiamo è migliore per la grafica.

Ma come animeresti l'ombra, quando non ha alternative come sinistra / trasformazione? Bene, anima l'opacità! Avere due elementi, uno con inizio, stato e uno con stato finale. Quindi sfumare l'inizio e la fine in entrata. In questo modo sembrerebbe che l'ombra si espanda, dove in realtà svanisce.

NON animare gli elementi che influenzano il layout, se possibile. I calcoli del layout sono costosi e una CPU può eseguire solo una quantità limitata di calcoli. Spesso meno di uno ogni 16 ms, il che si tradurrà in FPS inferiori a 60.

Selettori troppo profondi

Cos'è un modificatore? Una classe, che puoi aggiungere a un'altra classe e sostituire alcune delle sue proprietà. Esempio: .button ha il colore: rosso. .button-primary, ha colore: blu. Quindi, quando aggiungi .button-primary a .button, vuoi finire con un colore blu. Vai tranquillo. Anche se non tutte le volte è così facile. E non tutte le volte è un componente come questo.

A volte, vogliamo sovrascrivere un componente, figlio di un altro componente su una pagina specifica. Quindi finiamo con qualcosa del genere: .page-name .section-name .component-1 .component-2 {…} Già quattro livelli di profondità. Ma quello che risulta è che possiamo semplicemente fare .page-name .componen-2 {...}. Più corto è meglio! Perché se succede che per qualche motivo devi sovrascrivere quel nuovo stile, non devi andare 5 livelli in profondità, poi 6, poi di più.

I selettori profondi fanno paura e le persone finiscono per usare! Important. ! important dovrebbe essere usato quando si desidera sovrascrivere gli stili inline su cui non si ha alcun controllo. Altrimenti, è una bandiera rossa che non stai facendo qualcosa di giusto.

File troppo grande

Ora, ovviamente, per un'applicazione di grandi dimensioni ci sarebbero molti stili, e questo è completamente comprensibile. Ma è sempre così grande? Un cattivo modo di estendere le classi in SASS (attraverso i mixin) genererebbe grandi catene di selettori, che impiegano alcuni secondi per scorrere per vederle tutte. Una corretta estensione ridurrebbe molto quel file. Potrebbe anche raddoppiare le dimensioni.

I framework inclusi, di cui sono in uso solo poche proprietà, sono anche un motivo comune per file di grandi dimensioni. Metti insieme bootstrap / foundation, font-awesome, animate.css e pochi altri framework / librerie simili e finisci con un file enorme da cui usi circa il 2%. Pulisci, tienilo in ordine e usa solo ciò che è veramente necessario. Molte volte non c'è nemmeno bisogno di un framework.

Framework quando non serve

Bootstrap, Foundation, UIKit e tutti gli altri framework sono fantastici! Risolvono un problema reale e sono estremamente preziosi per la comunità di sviluppo web. Non è necessario conoscere così bene HTML o CSS per creare dashboard e siti. Ma allontanati da quel caso, inizia a scrivere un po 'di CSS e incontrerai alcuni problemi.

• Devi capire correttamente come costruirli e come includerli
• Devi leggere la loro documentazione per trovare le impostazioni personalizzate e i mixin che forniscono.
• Devi seguire il loro markup e insegnare al tuo team a farlo.
• Devi veramente capire come estendere e modellare per creare una vista unica.

Includerli correttamente significa che usi solo ciò di cui hai bisogno. Per avere una struttura del genere che ti aiuti invece di proibirti di costruire qualcosa di personalizzato, devi sapere che i suoi meccanismi interni sono migliori della media. E per ottenere qualsiasi design personalizzato, dovrai modificare le impostazioni e le proprietà. E poi scrivi dei CSS personalizzati. E quel CSS personalizzato per sovrascrivere tutto ciò che il framework offre.

Quindi, se non c'è una reale necessità di un simile framework CSS, ma ce n'è ancora uno e non è stato utilizzato correttamente, questa è una bandiera rossa che qualcosa non va. E quando inizi una volta con esso, molto probabilmente finirai per usarlo fino alla fine del ciclo di vita del progetto. Quindi è una decisione importante.

Non consentire al contenuto di definire le dimensioni

Questo è più un problema di livello principiante, ma è molto comune. Dovresti dare al contenuto la libertà che merita.

Ad esempio, non vuoi impostare la proprietà di larghezza del sito su 1200px. Vuoi impostare la larghezza massima su 1200px. In questo modo, la visualizzazione consentirà al tuo sito di rimanere reattivo.

Quindi, un campo di input non dovrebbe avere un'altezza di 40px, dovrebbe avere un riempimento di 1em. Ora, la dimensione del carattere, il contenuto è ciò che definisce la dimensione. E se il contenuto all'interno cresce, l'elemento non si romperà.

Questo modo di pensare quando si definiscono le dimensioni rimane importante durante l'intera applicazione. E ogni proprietà deve considerarlo. Idealmente, non impostare% per la larghezza nell'area del contenuto, perché in tal caso è necessario scrivere anche query multimediali.

Se avevi la larghezza massima, quando il tuo browser si restringe al di sotto di quella larghezza massima, il contenuto riempirà la larghezza del browser e quindi si ridurrà normalmente. Altrimenti, dovresti scrivere una media query per quella dimensione. E poi per qualsiasi altra dimensione personalizzata scritta sul sito. Questa è la complessità aggiunta a causa del cattivo approccio. Quasi uguale a tutti gli altri punti di cui abbiamo già discusso.

Hack JavaScript

JavaScript può fare miracoli! Ma non è sempre necessario. Puoi fare così tanto con solo CSS che è ben supportato, non richiede funzionalità (che è meglio testato automaticamente in seguito) e non richiede che anche gli altri membri di FE conoscano JS.

Naturalmente, c'è la funzionalità di commutazione standard, in cui puoi usare un input di casella di controllo per cambiare gli stili quando: selezionato, c'è la sovrapposizione di sfondo che può essere facilmente attivata e ci sono proprietà come counter per creare più di semplici elenchi <ol> .

Il consiglio qui è di cercare prima le soluzioni CSS. Supponiamo che tu voglia creare un popup. Si presenta al centro (posizione: fissa). Quindi si desidera chiuderlo dall'icona [X] o quando ci si fa clic intorno. In JS avresti bisogno di scrivere eventi che si attiverebbero su qualsiasi cosa tranne il contenuto popup. Ma si attiva ancora sulla [X] che si trova nel contenuto popup.

Invece, dai CSS puoi semplicemente scrivere un altro <div> che ha 100vw, 100vh size e z-index appena sotto il popup. Quindi puoi semplicemente scegliere come target quel div in JS, che è un one-liner.

Un altro esempio: si desidera un pulsante da inserire nel contenuto, che "espande" qualsiasi contenuto che lo segue. Semplice con CSS, un po 'più complesso con JS. Con i CSS puoi fare qualcosa del genere:

 Label.button: assegna uno stile visivo al pulsante.

 Input: not (: verificato) ~ * {display: none} - nasconde tutto ciò che segue nello stesso contenitore.

Quel bit "nello stesso contenitore", è necessaria la logica personalizzata in JS. È inoltre necessario selezionare tutti gli elementi, il che richiede l'attraversamento dell'albero DOM. E poi applica gli stili CSS a loro, che finirebbero nel tag style = "", che a sua volta richiederebbe! Important se per qualche motivo devi affrontarli. IN CSS, per fortuna, è estremamente semplice.

Il percorso per diventare un buon web designer

Conclusione

Come puoi vedere, questi sono pochissimi problemi comuni. Per coprirli tutti, sarebbe necessario un libro. Ma si spera che ti forniscano un buon punto di partenza e ti ricordino di pensare a qualsiasi potenziale problema che potrebbe sorgere a causa di un approccio sbagliato. Individuare tali problemi richiede un sacco di esperienza e molta lettura. E se sei arrivato alla conclusione qui, allora sei sulla strada giusta con la lettura, ora è il momento di esercitarti!