Le mie riflessioni sui CSS

Questo articolo farà parte di una serie dedicata al modo in cui sviluppo quotidianamente i miei progetti WordPress, ma per ora consideriamolo come un articolo a sé stante. Vorrei fornirvi una breve introduzione alle mie riflessioni sul CSS in relazione alla personalizzazione dei temi figli di WordPress.

Nella mia quotidianità, come ho già accennato in alcuni altri articoli, lavoro per un’azienda SaaS in cui utilizziamo Tailwind come framework CSS e tutto è rigorosamente vincolato a un sistema di design rigido. Nel mio “tempo libero”, tuttavia, quando lavoro su progetti più semplici e ho ampio margine di manovra, ho sviluppato un mio tema figlio che ho presentato in questo articolo: https://blog.riccardodicurti.it/my-local-development-environment-and-how-i-update-in-production. Più spesso di quanto vorrei, parto da un tema commerciale con Visual Composer. Il tema iniziale non utilizza un framework CSS, ma la gestione delle colonne e alcuni modelli ricordano molto Bootstrap.

Quando realizzo questi siti web, molto spesso ho bisogno di creare elementi per Visual Composer che ricordano molto i componenti React riutilizzabili per la creazione di pagine, ma purtroppo in questo ambiente non esiste un equivalente dei CSS Module.

In ogni caso, seguo questi principi nella scrittura del mio CSS:

• utilizzo delle nuove funzionalità: cerco di stare il più possibile al passo con i tempi, a volte dedicando del tempo a sperimentare nuove funzionalità (quando sono sufficientemente compatibili https://caniuse.com/). In passato, questo impegno mi ha portato a conoscere funzionalità che si sono rivelate rivoluzionarie e che ancora oggi velocizzano notevolmente il mio flusso di lavoro.
  
  Permettetemi di fare alcuni esempi banali: flexbox, grid, calc(), object-fit o sticky
• uso di Sass: che dire, non potrei fare a meno di Sass. Scrivere CSS standard senza l’uso di variabili, codice riutilizzabile e nidificazione è ormai una tortura.
  
  Per chi non conoscesse Sass, vi incoraggio a visitare il sito: https://sass-lang.com/
• L’uso di BEM: l’uso di Sass è importante per velocizzare il lavoro, ma avere un’idea chiara di come organizzare il codice CSS aiuta anche a velocizzare la scrittura del codice.
  
  Se non avete ancora adottato una metodologia chiara per la nomenclatura, vi invito a visitare il sito di BEM: https://getbem.com/introduction/
• Meno è meglio: cerco sempre di scrivere e caricare il minor codice CSS possibile; se ne vale la pena, cerco di caricare un solo file per ogni template, in modo da ridurre il caricamento al minimo indispensabile.

Negli ultimi anni, il CSS si è evoluto parecchio, sia dal punto di vista del linguaggio che delle librerie e dei framework. Credo che, come in ogni cosa, sia importante tenersi aggiornati, ma come farlo? Personalmente, ogni anno do un’occhiata allo stato dell’arte del CSS (a questo link troverete quello del 2022 https://2022.stateofcss.com/en-US/) e approfondisco gli aspetti che non conosco nel dettaglio. Cerco inoltre di seguire alcuni blog di settore (https://css-tricks.com/, https://tympanus.net/codrops/ o https://www.smashingmagazine.com/).

Partecipa allo “Stato dei CSS 2023”: https://survey.devographics.com/it-IT/survey/state-of-css/2023