{"id":502,"date":"2014-11-17T18:01:53","date_gmt":"2014-11-17T17:01:53","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/css-audit-valutare-attentamente-il-codice\/"},"modified":"2014-11-17T18:01:53","modified_gmt":"2014-11-17T17:01:53","slug":"css-audit-valutare-attentamente-il-codice","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/css-audit-valutare-attentamente-il-codice\/","title":{"rendered":"CSS Audit: Valutare Attentamente il Codice"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/11\/n103css.jpg\" border=\"0\" align=\"left\" \/>La maggior parte delle persone non \u00e8 eccitata dalla prospettiva di revisionare il proprio codice, ma \u00e8 diventato uno dei miei tipi di progetto preferiti. Una verifica del CSS \u00e8 un lavoro veramente da detective. Si comincia con il codice di un sito e si scava sempre pi\u00f9 in profondit\u00e0: si guarda quanti fogli di stile vengono richiamati, in che modo questo influenza la performance del sito e come \u00e8 scritto il CSS stesso. Il vostro obiettivo \u00e8 di trovare dei modi per migliorare quello che gi\u00e0 c&#8217;\u00e8, per scovare i fix che renderanno migliore la vostra codebase e pi\u00f9 veloce il vostro sito.<\/p>\n<p>Condivido con voi alcuni suggerimenti su come approcciare la propria verifica, insieme ai vantaggi di fare un inventario completo del vostro CSS e numerosi tool.<\/p>\n<div class=\"paragrafo\">\n<h2>Benefici di una verifica<\/h2>\n<p>Una verifica, o audit, vi aiuta ad organizzare il vostro codice e ad eliminare le ripetizioni. Non scrivete codice durante un audit: fate semplicemente l&#8217;inventario di quello che c&#8217;\u00e8 e documentate le raccomandazioni da passare al cliente o da discutere con il vostro team. Queste raccomandazioni assicurano che nel nuovo codice non si ripeteranno gli errori passati. Diamo un&#8217;occhiata pi\u00f9 da vicino agli altri benefici:<\/p>\n<ul>\n<li><strong>Riduce la dimensione dei files.<\/strong> Una visione di insieme del CSS vi lascia il tempo di trovare dei modi per fare il refactoring del codice: pulirlo e magari tagliare il numero di propriet\u00e0. Potete anche cercare cose varie come versioni datate di prefissi per i browser che non vengono pi\u00f9 usati. Eliminare il codice inutilizzato e non necessario taglia la dimensione del file che le persone devono scaricare quando visitano il vostro sito.<\/li>\n<li><strong>Assicura la consistenza con le linee guida.<\/strong> Mentre fate l&#8217;audit, create la documentazione riguardante i vostri stili e cosa succede con il sito o l&#8217;applicazione. Potreste fare una style guide formale o semplicemente scrivere delle raccomandazioni per far notare come vengono usati pezzi diversi del vostro codice. Qualunque forma assuma la vostra documentazione, far\u00e0 risparmiare molto tempo e problemi a chiunque entrer\u00e0 nel vostro team, perch\u00e9 potranno familiarizzare facilmente con il CSS e l&#8217;architettura del vostro sito.<\/li>\n<li><strong>Standardizza il vostro codice.<\/strong> L&#8217;organizzazione del codice, che sicuramente attrae diverse opinioni, \u00e8 essenziale per far s\u00ec che la vostra codebase sia pi\u00f9 facile da mantenere nel futuro. Ad esempio, se scegliete di mettere in ordine alfabetico le vostre propriet\u00e0, potete subito trovare i duplicati perch\u00e9 vi troverete con due insiemi di propriet\u00e0 di margin proprio una accanto all&#8217;altra. Oppure potreste preferire raggruppare le propriet\u00e0 secondo la loro funzione: posizionamento, relative al box-model, etc. Mettere a punto un sistema vi aiuta a stare alla larga dalle ripetizioni.<\/li>\n<li><strong>Migliora la performance.<\/strong> Ho tenuto il meglio per ultimo. La verifica del codice, insieme al combinare e zippare i fogli di stile, porta a velocit\u00e0 del sito nettamente pi\u00f9 rapide. Per esempio, <a href=\"http:\/\/csswizardry.com\">Harry Roberts<\/a>, un front-end architect dello UK che fa audit regolarmente, mi ha detto di un sito su cui ha lavorato recentemente:<br \/>\n<blockquote>\n<p>Ho ricreato <a href=\"https:\/\/www.fasetto.com\/\">Fasetto.com<\/a> con la volont\u00e0 di migliorarne la perfromance: \u00e8 passato da <a href=\"https:\/\/web.archive.org\/web\/20140103113604\/http:\/\/www.fasetto.com\/\">27 fogli di stile separati<\/a> per un sito di una sola pagina (principalmente UI toolkits come Bootstrap, etc.) fino a solo un foglio di stile (che \u00e8 minimizzato e in linea, per far risparmiare delle richieste HTTP), che dopo essere stato gzippato pesa solo 5.4 KB.<\/p>\n<\/blockquote>\n<\/li>\n<\/ul>\n<p>Si tratta di un&#8217;enorme vittoria, specialmente per le persone sulle connessioni pi\u00f9 lente, ma in realt\u00e0 tutti ci guadagnano quando i siti si caricano rapidamente.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Come fare la verifica: fare l&#8217;inventario<\/h2>\n<p>Ora che gli audit vi hanno convinto, come procedete per farne uno? Mi piace cominciare con alcuni tool che forniscono una visione generale di quella che \u00e8 la codebase attuale del sito. Potreste approcciare il vostro audit in maniera differente, a seconda delle aree problematiche del vostro sito o la vostra filosofia di scrittura del codice (se <a href=\"http:\/\/oocss.org\">OOCSS<\/a> o <a href=\"http:\/\/bem.info\/method\">BEM<\/a>). La cosa importante \u00e8 tenere a mente quello che sar\u00e0 pi\u00f9 utile per voi e il vostro sito.<\/p>\n<p>Una volta fatta la diagnosi con i tool, esaminer\u00f2 il codice riga per riga.<\/p>\n<h3>Tool<\/h3>\n<p>Il primo strumento che uso sempre \u00e8 l&#8217;inestimabile <a href=\"https:\/\/github.com\/stubbornella\/type-o-matic\">Type-o-matic<\/a> di Nicole Sullivan, un add-on per Firebug che genera un report JSON di tutti gli stili tipografici in uso nel sito. Come bonus extra, Type-o-matic crea un report visuale mentre sta girando. Osservando entrambe i report, saprete subito quando combinare gli stili per la tipografia che sono troppo simili, eliminando gli stili non necessari. Ho scoperto che il dettaglio del report JSON rende semplice vedere come creare un sistema tipografico pi\u00f9 riutilizzabile.<\/p>\n<p>Oltre a Type-o-matic, uso <a href=\"http:\/\/csslint.net\">CSS Lint<\/a>, uno strumento estremamente flessibile che segnala una gran quantit\u00e0 di potenziali bug, dai colori di fallback mancanti alle propriet\u00e0 shorthand per migliorare la performanc. Per usare CSS Lint, cliccate la freccia accanto alla parola &#8220;Lint&#8221; e scegliete le opzioni che desiderate. Mi piace controllare le propriet\u00e0 duplicate o se ci sono troppi font size, quindi solitamente scelgo Maintainability &amp; Duplication insieme a Performance. Quindi, CSS Lint ritorna una serie di raccomandazioni per effettuare delle modifiche: alcune possono essere collegate ai dei problemi noti che non funzionano nei browser pi\u00f9 vecchi e altri potrebbero essere best practice (per come li vede i tool). CSS Lint non \u00e8 perfetto. Se lo fate girare lasciando spuntate tutte le opzioni, potreste vedere cose nel report finale con cui non siete d&#8217;accordo, come i warning per IE6. Detto ci\u00f2, si tratta di un modo rapido per avere un&#8217;idea dello stato generale del vostro CSS.<\/p>\n<p>Poi, cerco nel CSS per scoprire con che frequenza ripeto le propriet\u00e0 comuni, come <code>float<\/code> o <code>margin<\/code>. (Se siete a vostro agio con la rig di comando, usate <code>grep<\/code> insieme alle istruzioni e attaccateci qualcosa tipo <code>grep \u201cfloat\u201d styles\/styles.scss<\/code> per trovare tutte le istanze di <code>\u201cfloat\u201d<\/code>). Fate attenzione a qualunque propriet\u00e0 potreste tagliare o inserire in altri moduli. Ordinare le propriet\u00e0 \u00e8 un esercizio di equilibrio: per ridurre il numero di propriet\u00e0 ripetute, potreste aver bisogno di aggiungere pi\u00f9 classi al vostro HTML, quindi dovrete calcolare questo costo in base al vostro progetto.<\/p>\n<p>Mi piace fare questo step a mano, perch\u00e9 mi costringe a far passare il CSS per conto mio, che a sua volta mi aiuta a comprendere meglio quello che succede. Ma se avete poco tempo o se non vi sentite a vostro agio con la riga di comando, ci sono dei tool che possono facilitarvi il compito:<\/p>\n<ul>\n<li><a href=\"http:\/\/atomeye.com\/css-dig.html\">CSS Dig<\/a> \u00e8 uno script automatizzato che gira su tutto il vostro codice per aiutarvi a vederlo visualmente. Uno strumento simile \u00e8 <a href=\"http:\/\/www.stylestats.org\/\">StyleStats<\/a>, in cui inserite un url per osservare il suo CSS.<\/li>\n<li><a href=\"https:\/\/github.com\/SlexAxton\/css-colorguard\">CSS Colorguard<\/a> \u00e8 un tool nuovissimo che gira su Node e d\u00e0 in output un report basato sui vostri colori, cos\u00ec che possiate vedere se ci sono colori troppo simili. Questo vi aiuta a limitare la vostra palette di colori, rendendone pi\u00f9 semplice il mantenimento in futuro.<\/li>\n<li><a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/dust-me-selectors\">Dust-Me Selectors<\/a> \u00e8 un addon per Firebug in Firefox che trova i selettori non utilizzati.<\/li>\n<\/ul>\n<h3>Riga per riga<\/h3>\n<p>Dopo aver utilizzato i vostri tool, prendetevi il tempo per leggere il CSS: vale la pena farlo per avere davvero un&#8217;idea di quel che sta accadendo. Per esempio, i commenti nel codice, che vengono saltati dai tool, potrebbero spiegare il motivo per cui persistono alcune stranezze.<\/p>\n<p>Un importante aspetto che controllo due volte \u00e8 la <a href=\"http:\/\/smacss.com\/book\/applicability\">profondit\u00e0 dell&#8217;applicabilit\u00e0<\/a>, ossia per quanto si applica una stringa di un attributo. Il vostro CSS si basa molto sulla specificit\u00e0? Vedete lunghe stringhe di selettori, negli stessi fogli di stile o nell&#8217;output di un preprocessore? Una alta profondit\u00e0 di applicabilit\u00e0 significa che il vostro codice richieder\u00e0 una struttura HTML molto specifica perch\u00e9 funzionino gli stili. Se potete ridurla, avrete codice pi\u00f9 riutilizzabile e performance pi\u00f9 rapide.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Revisionare e raccomandare<\/h2>\n<p>Adesso arriva il divertimento: una volta che avete i vostri dati, potete scoprire come migliorare il CSS e fare delle raccomandazioni.<\/p>\n<p>Il documento di raccomandazione non deve essere di design o super formatto, ma dovrebbe essere semplice da leggere. Dividerlo in due parti \u00e8 una buona idea. La prima conterr\u00e0 la vostra revisione, con l&#8217;elenco delle cose che avete trovato. Se fate riferimento ai risultati di CSS Lint o Type-o-matic, assicuratevi di includere o uno screenshot o il report JSON stesso come allegato. La seconda met\u00e0 conterr\u00e0 le raccomandazioni in merito alle azioni da intraprendere per migliorare il codice. Pu\u00f2 trattarsi semplicemente di un elenco, con punti tipo &#8220;Consolidate gli stili tipografici che sono strettamente collegati e create dei mixin per l&#8217;uso in tutto il sito&#8221;.<\/p>\n<p>Man mano che analizzate tutte le informazioni che avete raccolto, cercate delle aree in cui potete:<\/p>\n<ul>\n<li><strong>Ridurre il codice.<\/strong> Avete quattro insiemi diversi di stili per un call-out box, molti stili simili per i link, o davvero troppe eccezioni alla vostra griglia standard? Tutti questi sono degli ottimi candidati per degli stili modulari ripetibili. Per rendere ancora pi\u00f9 semplice il consolidamento potete usare un preprocessore come Sass per farli diventare dei <a href=\"http:\/\/oocss.org\/spec\/css-mixins.html\">mixins<\/a> o degli <a href=\"http:\/\/sass-lang.com\/guide\">extend<\/a>, facendo cos\u00ec in modo che gli stili vengano applicati quando li richiamate con una class. (Controllate solo che anche il codice in uscita sia sensato).<\/li>\n<li><strong>Mantenere consistente il codice.<\/strong> Una buona verifica vi assicura che il codice aderisca alla sua propria filosofia. Se il vostro CSS \u00e8 scritto basandosi su un particolare approccio, come BEM o OOCSS, \u00e8 consistente? Oppure gli stili deviano di tanto in tanto e ci sono deviazioni accettabili? Assicuratevi di documentare queste eccezioni, cos\u00ec che gli altri componenti del vostro team ne siano a conoscenza.<\/li>\n<\/ul>\n<p>Se state lavorando con un cliente, \u00e8 importante, inoltre, spiegare gli approcci che preferite, cos\u00ec che capiscano da dove venite e quali cose potreste considerare come problematiche con il codice. Per esempio, io preferisco OOCSS, cos\u00ec tendo a spingere per pi\u00f9 modularit\u00e0 e pi\u00f9 riusabilit\u00e0: qualche class ammucchiata non mi d\u00e0 fastidio (se non state usando un preprocessore). Assicuratevi che il vostro cliente capisca che il contesto del vostro lavoro \u00e8 particolarmente importante quando non si \u00e8 nel team di implementazione.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Consegnate al cliente<\/h2>\n<p>Fatto! Una volta che avrete scritto le vostre raccomandazioni (e vi sarete presi del tempo per rifletterci per essere sicuri che siano ben fondate, potete passarle al cliente. Siate preparati per qualunque domanda possa avere. Se tutto questo lavoro \u00e8 destinato al vostro team, congratulazioni! Datevi da fare con la vostra lista!<\/p>\n<p>Ma aspettate, perch\u00e9 un audit ha ben altre ricompense. Ora che avete questa fondamentale documentazione, fate un ulteriore passo in avanti: usatela come trampolino per parlare di come mantenere d&#8217;ora in poi il CSS. Se continuano a presentarsi le stesse questioni nel vostro codice, documentate come le avete risolte, cos\u00ec che tutti sappiano come procedere in futuro quando creeranno nuove feature o sezioni. Potreste far diventare questo documento una <a href=\"article\/creating-style-guides\">style guide<\/a>. Un&#8217;altra cosa da considerare \u00e8 la frequenza con cui rivedere il proprio audit per essere sicuri che la propria codebase rimanga immacolata. La tempistica varier\u00e0 a seconda del team e del progetto, ma impostate un calendario realistico e regolare. Questa \u00e8 una parte fondamentale del processo di verifica.<\/p>\n<p>Fare un audit \u00e8 il primo passo vitale per mantenere il vostro CSS pronto a tutto ed energico. Contribuisce anche a mantenere aggiornata la vostra documentazione, permettendo al vostro team di avere una buona idea su come procedere con le nuove feature. Quando il vostro codice \u00e8 ben strutturato \u00e8 pi\u00f9 performante e tutti ne traggono beneficio. Quindi, trovate il momento, indossate il vostro miglior cappello da investigatore e cominciate!<\/p>\n<p>Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Una verifica del CSS aiuta ad organizzare il codice e ad eliminare le ripetizioni per avere siti pi\u00f9 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.<\/p>\n","protected":false},"author":818,"featured_media":7000748,"comment_status":"open","ping_status":"open","template":"","categories":[4,244,120],"tags":[],"coauthors":[417],"class_list":["post-502","article","type-article","status-publish","has-post-thumbnail","hentry","category-codice","category-css","category-numero-103-18-novembre-2014"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/502","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=502"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000748"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=502"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}