Sass è uno strumento potente che ci aiuta nelle nostre battaglie con i fogli di stile complessi. A volte però fa venire il mal di testa, in situazioni come il problematico annidamento dei selettori CSS, la duplicazione del codice e l’accoppiamento stretto, che portano ad avere un CSS in uscita incasinato. Gli standard universali non sono una risposta praticabile dal momento che la specifica di Sass continua a cambiare e a crescere rapidamente. Felicity Evans sostiene che il problema non sia Sass di per sé, ma il modo in cui lo usiamo. In questo articolo, avvalla una serie di principi che offrono delle linee guida su come lavorare con Sass e valutare nuove feature e tecniche.
Argomento: CSS
CSS assiomatico e gufi lobotomizzati
Gestire il flow content può diventare macchinoso: troppi selettori di class possono far venire un mal di testa da specificity, gli stili annidati possono diventare ridondanti e i creatori del contenuto non sono sempre in grado di capire il markup presentational. Heydon Pickering offre un’opzione inaspettata per gestire gli stili a cascata in maniera più efficiente: una variazione del selettore universale.
CSS Audit: Valutare Attentamente il Codice
Una verifica del CSS aiuta ad organizzare il codice e ad eliminare le ripetizioni per avere siti più veloci. Susan Robertson ci mostra come scovare i possibili punti critici, oltre ad offrirci suggerimenti sui tool, sulla documentazione e sui modi per mantenere la nostra codebase piccola anche nel futuro.
Web Design radio-comandato
Tab, modal overlay, navigazione nascosta: abbiamo sviluppato molti pattern che ci aiutano nella progettazione di design per schermi mobile, ma questi pattern tendono a mostrare e a nascondere il contenuto usando JavaScript, che già di per sé pone delle sfide. Art Lawry esplora delle tecniche per ridurre questa dipendenza da JavaScript usando un’improbabile tool: i radio button.
DRY e i mixin
Potreste già avere una certa familiarità con il principio DRY per scrivere codice: Don’t Repeat Yourself (Non ripeterti). Usare Sass è un ottimo modo per raggiungere questo obiettivo, ma Sam Richard ci invita a fare un passo in più. Per la fine di questo articolo, starete già adattando i vostri mixin Sass per utilizzare la quantità minima in assoluto di codice, così che le vostre pagine saranno super leggere e rapide nel caricamento su qualunque piattaforma. La magia di Sass vi aspetta, allacciate le cinture!
UI Animation e UX: un’amicizia malcelata
Le parole animazioni web fanno correre molti di noi alla frenetica ricerca del pulsante skip intro, ma aggiungere movimento al nostro lavoro può avere un significato ed essere funzionale, se troviamo le giuste circostanze. Le animazioni possono dare degli indizi, guidare l’occhio e smussare gli angoli altrimenti troppo spigolosi di alcune interazioni web. Val Head ci mostra in che modo ciò sia possibile con CSS.
Perché Sass?
Ero un riluttante sostenitore di Sass. Scrivo fogli di stile a mano! Non ho bisogno d’aiuto! E sicuramente non voglio aggiungere della complessità extra al mio workflow. Vade retro! Così dice il designer, mago di CSS e co-fondatore di Dribbble Dan Cederholm all’inizio del suo nuovo libro citeSass For Web Designers/cite, pubblicato oggi da A Book Apart. Tuttavia, lo scettico convertito scopre presto che il popolare pre-processore CSS può essere un potente alleato anche per il più appassionato artigiano del front-end design/development. Dan non ha mai imparato nulla di CSS senza condividerlo (ed è davvero bravo come insegnante) e in questo esclusivo estratto dal Capitolo 1 di Sass For Web Designers, avrete un assaggio di come Dan ha imparato a smettere di preoccuparsi ed usare Sass per avere più controllo sui suoi fogli di stile e siti.
Migliorare la UX con la performance front-end
Uno studio di Google afferma che aggiungere mezzo secondo alla pagina dei risultati di una ricerca può far diminuire il traffico e le entrate pubblicitarie del 20%. Amazon ha scoperto che per ogni 100 millisecondi in più sul tempo di caricamento, le vendite diminuiscono del 1%. Gli utenti si aspettano che le pagine si carichino in due secondi e dopo tre secondi il 40% di loro semplicemente se ne va. Il messaggio è chiaro: dobbiamo fare in modo che l’ottimizzazione della performance sia una parte fondamentale del modo in cui progettiamo, realizziamo e testiamo ogni sito che creiamo, per ogni dispositivo. Progettare per la performance, misurare i risultati.
Responsive comp: ottenere un contratto senza mockup
Se create siti web, ci sono buone possibilità che avrete pensato a quale possa essere un processo di design responsive-friendly e probabilmente sarete giunti alla conclusione che aggiungere un mockup per ogni breakpoint non sia un approccio sostenibile. Progettare direttamente nel browser potrebbe essere la risposta, ma potrebbe essere difficile capire da dove cominciare o potreste sentirvi disorientati dalla prospettiva di rinunciare ad una metodologia su cui avete fatto affidamento per molto tempo. Faccia il suo ingresso il responsive comping: questo nuovo processo di web design senza i mockup rende semplice scrollarsi di dosso la scimmia di Photoshop e ricominciare da capo progettando con il vostro vecchio amico browser.
Impariamo ad amare le parti noiose di CSS
Il futuro di CSS ci dà molti motivi per cui essere emozionati: da un lato, c’è una vasta gamma di nuovi metodi che rivoluzioneranno il modo in cui creiamo le nostre pagine sul web; dall’altro, c’è un nuovo insieme di effetti grafici che ci permetteranno l’uso di filtri e ombreggiature al volo. Le persone adorano queste cose. I magazine e i blog sono pieni di articoli che li riguardano, ma se questi strumenti sono la parte appariscente di CSS, è ora di dare un po’ di attenzione ai cavalli da tiro del linguaggio. Vediamo quali sono le parti noiose come i selettori, le unità e le funzioni che rivoluzioneranno il modo in cui lavoriamo, sebbene in maniera umile e senza pretese.
