Il comportamento, inteso nel modo in cui si lavora, anche per la realizzazione di un CSS potrebbe essere soggetto ad una bella dose di UX design. La User Experience, anche un modo per lavorare meglio, uno strumento che possiamo a nostra volta utilizzare per migliorare il nostro modo di lavorare.
Se siete dei web designer di sicuro vi sarete imbattuti nei CSS (Cascading Style Sheets) mentre realizzavate una pagina web. Molto probabilmente avrete sentito dire dai vostri colleghi, che miracoli possono fare i CSS, tipo diminuire il tempo di caricamento di una pagina o come far risparmiare tempo prezioso quando si progetta una pagina web. I CSS sono un vero e proprio “salva vita”, quando volete riprogettare le vostre pagine web o il vostro sito. I CSS hanno un valore inestimabile sia per i designer che per i developer quando lavorano insieme per creare bellissimi siti web dinamici.
Tenere un CSS pulito, ti aiuta ad implementare le idee senza perder tempo
Se non avete una buona confidenza con i CSS vi consiglio di realizzare dei piccoli esempi passo-passo in modo da imparare a tenere bene ordinati i vostri CSS per trarne i maggiori benefici.
USARE I FRAMEWORKS
Molti web designer creano e pubblicano dei frameworks (una sorta di software che genera altri software) che contengono già un set di regole per gli oggetti e/o elementi più comuni, usati nelle pagine web.
I framework possono aiutarvi a creare un style decente per il vostro website in pochissimo tempo. E’ un mondo in cui sperimentare e magari il vostro set di colori, font ed elementi vari potrebbe essere un prossimo framework popolare.
Sforzatevi a favore della semplicità
Più passerà il tempo e più il vostro sito crescerà nei contenuti, sezioni, pagine ecc… Quindi scrollare (scorrere) le moltitudini di righe dei vostri CSS sarà un oblio. Potete però vare un overlap o override di qualsiasi elemento con un CSS che si sovrapponga a quello vecchio.
Strutturare il vostro file
Di sicuro il codice aumenterà notevolmente e prima o poi vi troverete a cercare porzioni di codice all’interno di un CSS immenso. Un mio consiglio è commentare il codice ed avere una struttura gerarchica, magari sezionando le parti di codice in aree come (in testa il codice per l’header, in un determinato punto del foglio CSS per l’elmento X e infine per l’elmento Y). Personalmente separo sempre le zone del foglio CSS con la stessa logica di dove sono posizionati i miei elementi, così da intercettarli facilmente.
- Tenete i vostri spazi tra gli elementi di regole e dichiarazioni nel CSS in modo uniforme, in modo da essere facilmente leggibili e/o interpretabili.
- Utilizzate nomi per le vostre classi e id in modo semantico o “familiare”, come per esempio per un div contact potete separare logicamente due elementi come un “contact_campotesto” da un eventuale “contact_immagine”.
- Tenete il codice DRY (Don’t Repeat Yourself – Ovvero non ripetetevi), se per esempio avete usato una classe nel vostro CSS non ripetetela o si creerà confusione.
- Mettete alla prova il vostro CSS con gli strumenti del W3C che possono testare la bontà del vostro file CSS.
Andare oltre le nozioni base
Se siete degli utenti un pò più evoluti potete valutare l’uso di programmi come SASS (Syntactically Awesome Style Sheets) o LESS. Sono degli ambienti IDE per poter gestire codici CSS molto complessi e variabili. Personalmente li sto ancora studiando dopo essermi imbattuto nel CMS Prestashop che utilizza proprio un IDE SASS.
In conclusione i CSS sono un grandissimo tool per migliorare le prestazioni e l’estetica del vostro sito web o quello del vostro cliente. Danno al vostro Brand un’identità ed influenzano la UX del sito, quindi non prendeteli sotto gamba.