Scrivere CSS – parte 5

SCRIVERE CSS Ultimo articolo su “Come scrivere CSS”, ...

SCRIVERE CSS
Ultimo articolo su “Come scrivere CSS”, per migliorare ed approfondire le tecniche dei Cascade Style Sheet; fondamentali per la corretta visualizzazione delle pagine HTML.

Utilizzare un preprocessore su progetti di grandi dimensioni

Sass, Less, PostCSS, Stylus: i preprocessori sono il prossimo passo nell’evoluzione dei CSS. Forniscono funzioni come variabili, funzioni CSS, nidificazione dei selettori e molte altre caratteristiche che  rendendo il codice CSS più facile da gestire; specialmente nei progetti di grandi dimensioni. L’unico vero inconveniente dei preprocessori è che hanno bisogno di compilare CSS vanilla, ma se si sta già utilizzando uno script di build nel progetto questo non dovrebbe essere un problema.

Esempio di un un foglio di stile con Sass:

$draw-color: #2196F3;

a {
    padding: 10px 15px;
    background-color: $draw-color;
}

a:hover {
    background-color: darken($draw-color,10%);
}

Autoprefixers per una migliore compatibilità
La scrittura di prefissi specifici per i vari  browser è una delle cose più noiose nei CSS. Per fortuna, ci sono strumenti che lo fanno automaticamente e ti permetteranno anche di decidere quali browser  supportare:

• Online tools: Autoprefixer
• Text editor plugins: Sublime Text, Atom
• Libraries: Autoprefixer (PostCSS)

Usa codice minificato in produzione
Per migliorare la velocità di carimento delle pagine e diminuire il carico di lavoro del server dovresti sempre utilizzare la minificazione dell’asset js, css, html. La versione minificata del tuo codice rimuoverà tutti gli spazi bianchi e le ripetizioni, riducendo la dimensione totale del file. Ovviamente, questo processo rende i fogli di stile illeggibili, quindi mantieni sempre una versione .min per la produzione e una versione normale per lo sviluppo.

Caniuse
I diversi browser Web presentano ancora molte  incompatibilità. Usare caniuse o un servizio simile per verificare se ciò che stai usando è ampiamente supportato, se necessita di prefissi, o se può causare  bug in  determinate piattaforme. Tuttavia, il controllo di caniuse non è sufficiente. È infatti necessario eseguire test (manualmente o tramite un servizio) poiché talvolta i layout si “rompono” senza motivazioni apparenti.

La convalida 
La convalida dei CSS potrebbe non essere importante quanto la convalida del codice HTML o JavaScript, ma l’esecuzione del codice tramite un Linter CSS può comunque essere molto utile. Ti dirà se hai commesso degli errori, delle bad practices e ti fornirà suggerimenti generali su come migliorare il codice. Proprio come i minificatori e gli autoprefixer, sono disponibili molti validatori gratuiti:

• Online tools: W3 Validator, CSS Lint
• Text editor plugins: Sublime Text, Atom
• Libraries: stylelint (Node.js, PostCSS), css-validator (Node.js)

Kenji Agency : creazione  siti web a Treviso