CSS: dieci consigli per utilizzarlo al meglio

Difficoltà:    

Non è un linguaggio di programmazione nel senso più stretto del termine, ma si tratta indubbiamente di uno dei pilastri fondamentali dello sviluppo front end: il CSS (acronimo di Cascading Style Sheet) è un linguaggio di stile imprescindibile per presentare pagine e applicazioni web, a braccetto con l’HTML che ne definisce la struttura.

Benché ad oggi esistano decine di CMS e page builder che lo generano in automatico e framework con classi CSS preconfezionate, chiunque si approcci al mondo del web design dovrebbe investire un (bel) po’ di tempo nello studiare a fondo il CSS e saperlo padroneggiare – vi stupireste di quanto spesso una piccola correzione a livello di CSS possa stravolgere la user experience in positivo.

Una tra le mie prime sfide da autodidatta fu proprio creare una pagina web statica utilizzando solo HTML5 e CSS3 (senza l’ausilio di framework come Bootstrap) e mi resi conto ben presto di quanto la sua semplicità fosse solo apparente.

Ho voluto raccogliere le lezioni che ho appreso dai miei errori da principiante per realizzare una check list dei passaggi più importanti da eseguire quando si modifica lo stile di un progetto web.

Dieci consigli CSS per principianti

  1. Verifica la compatibilità cross-browser

    Moltissimi trascurano questo passaggio, sebbene sia fondamentale per realizzare un prodotto funzionale: controllare sempre la compatibilità cross-browser delle proprietà CSS. Non tutti i browser supportano alcune proprietà, e il rischio maggiore è che la pagina presenti tutto un altro aspetto se visualizzata su un broswer diverso dal vostro.

    Utilizzate Browsershots per avere subito un quadro chiaro di come viene visualizzato il sito se navigato su un broswer differente e Can I use per sapere se la priorietà CSS che volete utilizzare è supportata da tutti i browser più comuni (io di solito controllo Firefox, Chrome, IE, Safari e Opera nelle loro ultime tre versioni).

  2. Resetta o normalizza il CSS

    Alcuni browser supportano diversi stili di default, ovvero fogli CSS utilizzati per rendere più leggibili alcuni elementi delle pagine web non stilizzate. L’esempio più comune è quello dei link colorati in blu e sottolineati. Per evitare di dover obbligatoriamente sovrascrivere tutti gli stili di tutti i browser e quindi dover aggiungere classi CSS superflue, è possibile resettare il loro CSS.

    Qui potete trovare i selettori da incollare nel vostro foglio di stile per resettare gli stili di default e di conseguenza non rischiare che i contenuti abbiano aspetti diversi su altri browser.

    Un altro metodo (sempre più diffuso) è quello di normalizzare il CSS anziché resettarlo: analogamente al reset, si tratta sempre di una serie di regole da aggiungere al vostro CSS, ma anziché resettare tutti gli stili del browser vengono conservati quelli realmente utili (come la tipografia e la dimensione dei font) per evitare di doverli reimpostare uno ad uno. Il foglio di stile più completo per questo scopo è il progetto open source normalize.css, scaricabile a questo link.

  3. Stilizza per varie risoluzioni

    Nei bei tempi andati esistevano un massimo di 4-5 risoluzioni per i monitor. Ad oggi il range è incredibilmente più ampio: dagli smartphone ai monitor 24 pollici, passando per tablet e laptop, è imprescindibile tenere presente che la pagina web che state sviluppando potrà essere visualizzata da una moltitudine di device con risoluzioni differenti.

    Una delle sfide principali dei web designer oggi è proprio rendere l’aspetto delle pagine fluido, responsive e adattabile tanto a un device dallo schermo molto stretto che a un monitor full hd.

    Il CSS3 rende possibile questa fluidità grazie alle media query, tramite le quali vengono specificate delle classi da applicare soltanto a schermi della grandezza specificata nella query.
    Anziché creare da zero una versione mobile del sito, tramite le media query è quindi possibile adattare la pagina al dispositivo in uso.

    @media screen and (min-width: 1290px) {
    #page {
    margin: 20px;
    width: 100%;
    }
    }
    and
    @media screen and (max-width: 768px) {
    #page {
    margin: 20px;
    width: 600px;
    }
    }

    Potete trovare una spiegazione dettagliata sulle media query e i loro utilizzi nelle linee guida ufficiali di Google.

  4. Ricorda le gerarchie

    Questo è forse l’aspetto più ostico da assimilare per i neofiti. I selettori CSS seguono una precisa gerarchia, dal meno al più specifico, ovvero:
    selettore globale: * (si applica a tutto il documento)

    * {
    font-size:12px;
    color:#000;
    }

    Tutto il testo contenuto nel documento avrà colore nero e dimensione 12px.

    selettore di tag: a, div, etc. (si applica ai tag HTML)

    a {
    color:#000;
    }

    Tutto il testo contenuto nei tag a avrà colore nero.

    selettore di classe: .main (si applica ai tag HTML a cui è stata assegnata una precisa classe)

    .main {
    font-size:30px
    }

    Tutto il testo contenuto nei tag che hanno classe .main avrà una dimensione di 30px.

    selettore di ID: #carousel (si applica ad un preciso elemento a cui è stato assegnato un id)

    #carousel {
    color:#000;
    }

    Tutto il testo contenuto nell’elemento con l’id #carousel avrà colore nero (l’id, a differenza delle classi, designa un elemento preciso sulla pagina e va quindi utilizzato una volta soltanto).

    La best practice è sempre quella di non combinare troppi selettori in un singolo elemento se non strettamente necessario: ad esempio, è superfluo scrivere div#carousel, in quanto l’id è già abbastanza specifico. Come in ogni linguaggio di programmazione, nel CSS lo scopo è quello di essere più sintetici possibile.

  5. Combina le proprietà

    Esistono moltissimi metodi per sintetizzare il CSS, e combinare le proprietà può salvare moltissime righe superflue di codice.
    Anziché specificare singolarmente margin-top, margin-right, margin-bottom e margin-left è possibile combinarli nell’unica proprietà margin: (top) (right) (bottom) (left) (ad esempio margin: 2em 0 1em 4em).
    Lo stesso si può fare con border, padding, background, font e molte altre.

  6. Posiziona correttamente gli elementi

    Capire il posizionamento degli elementi è probabilmente l’aspetto più importante nella scrittura di un foglio CSS.
    Esistono quattro posizionamenti principali:
    static: si tratta della posizione di default, in linea con il normale flusso del documento.
    fixed: l’elemento è posizionato in relazione alla finestra del broswer, il che signfica che ha sempre posizione fissa nella pagina anche scrollando il resto del contenuto.
    relative: l’elemento è posizionato in relazione all’elemento immediatamente precedente
    absolute: l’elemento è posizionato in modo assoluto rispetto al primo elemento genitore che ha una posizione diversa da “static”.

  7. Comprendi la differenza tra px e em

    Per molti utenti alle prime armi è difficile cogliere la differenza tra le unità di misura più utilizzate nel CSS, ovvero pixel ed em.

    I pixel sono unità principalmente utilizzate per schermi desktop, in quanto gli elementi posizionati tramite pixel hanno una posizione fissa (corrispondente, appunto ai pixel dello schermo di un computer). Molti web designer utilizzano quest’unità nei documenti web al fine di produrre una rappresentazione pixel-perfect del loro sito, ma con l’avanzata della navigazione da dispositivi mobile il problema della non scalabilità è diventato un ostacolo non indifferente per il responsive design.

    L’unità em , al contrario, dipende dal carattere e può essere diversa per ogni elemento del documento. L’em è semplicemente la dimensione del font e 1em corrisponde a 2in (inches). Esprimere le dimensioni di elementi come margin e padding in em significa legare questi elementi alla dimensione del font – un accorgimento particolarmente consigliato per il responsive design, in quanto un utente che naviga su un monitor da 1500px vedrà caratteri più grandi rispetto a quelli di chi naviga da mobile. Le dimensioni degli elementi saranno quindi proporzionate al viewport e alla grandezza del font dell’utente.

    Piccola nota a margine: quando un elemento ha dimensione zero, non è necessario specificare l’unità di misura (come 0px, 0em, 0in). Un semplice “0” è più che sufficiente.

  8. Convalida l’HTML

    Sembrerebbe un suggerimento superfluo, ma in tantissimi sviluppano pagine web scrivendo HTML e CSS in contemporanea – il che aiuta a visualizzare immediatamente ogni elemento con il suo aspetto finale, ma d’altra parte dà adito a parecchi errori nel momento in cui c’è qualche imprecisione a livello di struttura.
    Il CSS non può reggersi in piedi se l’HTML non è perfetto, perciò è sempre consigliabile scrivere prima la struttura HTML della pagina, verificarla tramite un HTML validator e poi passare allo stile.
    Questo aiuta anche a stabilire in anticipo classi e ID degli elementi e rende più semplice la successiva stesura del CSS.

  9. Esprimi i colori correttamente

    Esistono tre modi di specificare i colori in CSS: utilizzando i loro nomi per esteso, il codice esadecimale (hex) o il codice rgb.
    Sempre a causa della compatibilità cross-browser (di cui abbiamo parlato al primo punto della lista) è consigliabile evitare i nomi per esteso dei colori (red, blue, yellow) che non sempre vengono riconosciuti ed interpretati allo stesso modo da tutti i browser.
    La pratica migliore è quella di usare il codice hex quando il colore non è in trasparenza, e rgba (dove a sta per alfa ed esprime il livello di trasparenza da 1.0 a 0.0) quando il colore è in semitrasparenza.
    Per trovare il codice rgba è sufficiente usare un convertitore online da hex a rgba e modificare il valore alfa in base al livello di trasparenza desiderato.

  10. Non usare mai codice inline

    Il CSS inline va utilizzato con parsimonia ed evitato il più possibile.
    Il motivo è presto spiegato: KISS, keep it simple stupid. Una pagina HTML dovrebbe contenere solo il codice necessario per costruire la struttura, senza alcun CSS o javascript inline, per poi caricare queste risorse separamente mantenendole su documenti diversi.
    Alcuni tool per testare la velocità delle pagine web raccomandano di utilizzare CSS inline per caricare gli elementi strettamente necessari a visualizzare il contenuto above the fold: sebbene quest’accorgimento possa lievemente ridurre il tempo di caricamento, personalmente preferisco sempre evitarlo proprio per non rendere il codice eccessivamente dispersivo. Se il foglio di stile è pesante da caricare, è preferibile dividerlo in più parti e caricare quelle essenziali all’above the fold nell’head del documento – un’alternativa efficiente ed utile per evitare codice CSS inline.

Se avete altri suggerimenti o integrazioni sulle best pratice per utilizzare il CSS, inviatemi i vostri consigli tramite la pagina contatti del blog: sarò felice di integrare le vostre raccomandazioni!

Di Susanna Marsiglia

Blogger, content manager, SEO, web designer, a volte scrittrice analogica. Nerd repressa causa incompatibilità con la matematica. Mens sana in corpore pigro.

Commenti (4)
  1. Andrea 28 dicembre 2015 at 21:40

    Ottimi consigli!
    Certo oggi l’uso di compilatori come Sass o Less può facilitare se si a che fare con css complessi

    • Susanna Marsiglia 2 gennaio 2016 at 23:01

      Assolutamente Andrea! 🙂
      Sono dell’idea che un po’ di sana “gavetta” con CSS3 puro senza compilatori (su pagine web semplici ovviamente) sia necessaria per poi arrivare a utilizzare Sass o Less con disinvoltura su progetti web molto estesi.

  2. Pingback: CSS: dieci consigli per utilizzarlo al meglio |...

Lascia un commento

Il tuo indirizzo email non verrà pubblicato. I campi obbligatori sono segnalati *