![](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/05\/n93cappelli.png\")
Molti anni fa, lavorai ad un’applicazione grande e complessa. Si trattava di una sorta di progetto “legacy”: vi si erano alternati molti designer e front-end developer e ciascuno di questi aveva aggiunto una nuova parte all’applicazione, che ormai era disordinata. Nel momento in cui arrivai io, il CSS era enorme, gli stili erano molti e vari e ci vollero un bel po’ di sforzi per capire se ci fosse qualcosa di riutilizzabile.<\/p>\n
In quel periodo, scoprii le style guide: un modo per controllare il markup e il CSS cos\u00ec che nessuno dei due sia fuori controllo o cresca a dismisura. Da allora, in qualunque mio lavoro, ho visto in prima persona come le style guide facciano risparmiare tempo durante lo sviluppo, rendano pi\u00f9 semplici le comunicazioni riguardanti il front-end e mantengano sia il codice sia il design consistenti sull’intero sito. \u00c8 stata una rivelazione e in questo articolo voglio mostrarvi come realizzarle ma anche come mantenerle.<\/p>\n
Per me, una style guide \u00e8 un documento in costante evoluzione, riguardante il codice: ne descrive in dettaglio i vari elementi e i moduli di un sito o di un’applicazione. Oltre al suo utilizzo per il consolidamento del codice front-end, documentano anche il linguaggio visuale (come ad esempio gli stili del header o la palette di colori) utilizzato per creare il sito. In questo modo, si ha un unico punto di riferimento per l’intero team, dai product owner e product producer ai designer e ai developer, quando si devono discutere dei cambiamenti e delle iterazioni da fare sul sito. Molte aziende hanno messo online le proprie guide: Starbucks \u00e8 la pi\u00f9 nota tra tutte, ma ce ne sono molte altre.<\/p>\n
![](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/05\/starbucks.png\")
<\/p>\nLa style guide di Starbucks.<\/p>\n<\/div>\n
(Dovrei anche dire che alcune persone chiamano pattern library<\/em> quella che io chiamo style guide<\/em>. Molte delle guide a cui faccio riferimento usano il termine style guide<\/em>, ma pattern library<\/em> si sta diffondendo parecchio).<\/p>\n Quando cominciai a lavorare per Editorially, una delle prime cose che feci fu di venire alle prese con la style guide. Creare la guida fu probabilmente la cosa pi\u00f9 utile che avessi mai fatto al momento del mio insediamento in un nuovo posto di lavoro: mi costrinse a leggere ogni singola riga di CSS<\/em>, per classificarla e per comprendere il modo in cui era stata usata, per poi documentarla per potervi fare riferimento (e perch\u00e9 anche il team potesse usarla in tal modo). Oltre a scoprire inconsistenze ed errori studiando il CSS, se non capivo come erano utilizzate alcune parti di codice, facevo delle annotazioni sulla guida comprensive di domande (a cui i miei compagni di team hanno sempre risposto gentilmente).<\/p>\n<\/div>\n Man mano che il vostro team cresce e cambia nel tempo, la vostra style guide vi aiuter\u00e0 in molti modi. Per prima cosa, creare la guida richieder\u00e0 un po’ di tempo all’inizio, ma ho scoperto che questo tempo viene compensato da tempistiche pi\u00f9 rapide nello sviluppo di nuove sezioni e nuove pagine, perch\u00e9 chiunque si unisca ad un progetto gi\u00e0 in corso pu\u00f2 far riferimento alla guida per sapere esattamente che stili usare.<\/p>\n Immaginate di cominciare a creare una pagina con informazioni come queste tratte dalla guida del South Tees Hospital: ci vorrebbero pochi secondi per realizzare un box per le donazioni.<\/p>\n<\/div>\n In secondo luogo, una guida ci permette di standardizzare il CSS, facendo s\u00ec che rimanga di dimensioni contenute e sia rapido da caricare. Usando la guida come un inventario di moduli e codice, sia i designer sia i developer possono capire rapidamente se i nuovi design deviano dagli standard prestabiliti e possono decidere insieme se vale la pena estendere la codebase o se si pu\u00f2 facilmente ampliare qualcosa di simile che \u00e8 gi\u00e0 stato scritto. Quando non si hanno guide, tutto ci\u00f2 \u00e8 impossibile, il che, nella mia esperienza, vuol quasi sempre dire che si scrivono nuovi stili, creando cos\u00ec un CSS troppo intricato e pieno di regole.<\/p>\n Terzo, \u00e8 pi\u00f9 semplice mantenere consistenza nel design, perch\u00e9 il designer deve guardare solo in un posto per avere dei riferimenti sui componenti del sito e per essere sicuro che ci sia sempre un “look and feel” consistente. Questa cosa \u00e8 particolarmente utile nei team pi\u00f9 grandi e nelle aziende in cui pu\u00f2 esserci un intero team di designer al lavoro sul sito. E quando si mantiene consistente un design, anche la codebase \u00e8 pi\u00f9 piccola.<\/p>\n Yelp dice chiaramente come sono usati i pulsanti, mantenendo consistenza negli stili dei pulsanti per tutto il sito.<\/p>\n<\/div>\n Quarto, anche la comunicazione diventa pi\u00f9 chiara. Quando creai delle pagine all’interno un progetto di grandi dimensioni e le passai alla designer, questa us\u00f2 il linguaggio delle varie classi presenti nella guida per chiedere dei cambiamenti. Tutto ci\u00f2 ha permesso che di evitare confusione da entrambe le parti mentre si procedeva di buon passo nelle revisioni. Inoltre, forn\u00ec un vocabolario condiviso all’intero team, con ad esempio i nomi dei moduli, che poteva essere usato parlando dei design una volta che erano stati programmati.<\/p>\n L’ultimo vantaggio che ho notato \u00e8 che potete usare la vostra guida per fare un rapido controllo di QA (Quality Assurance) e passarlo. La guida potrebbe non essere identica alle pagine che alla fine realizzerete, ma pu\u00f2 evidenziare dei problemi che si possono avere nei vari browser. Gestendo questi aspetti in anticipo, li si eviter\u00e0 nei test successivi.<\/p>\n<\/div>\n Di seguito, vi guider\u00f2 nella creazione della vostra style guide, basandomi sulla mia esperienza nelle prime settimane di lavoro a Editorially (perch\u00e9 quando lavoro su un progetto senza una guida ho un grandissimo bisogno di crearne una. Chiedete ai miei colleghi!).<\/p>\n Cominciate la vostra guida con le fondamenta del vostro sito. Un elemento fondamentale potrebbe includere la palette di colori, il sistema di layout a griglia o il tipo di stili di base per gli header e per il corpo del testo: qualunque cosa riteniate sia un elemento di base per creare una pagina. Nel caso di Editorially, la parte pi\u00f9 fondamentale del nostro sito era la color guide, quindi cominciai da quella e andai avanti partendo da essa. Creai un documento HTML con il markup, con un link al CSS dell’applicazione cos\u00ec che ogni cambiamento nel CSS avrebbe automaticamente avuto riscontro nella style guide.<\/p>\n Quando guardate la style guide creata da Yelp, potete vedere come inizia dalle basi: tipografia, griglia e colori, aggiungendo via via pi\u00f9 pattern.<\/p>\n Yelp.<\/p>\n<\/div>\n Un pattern \u00e8 un insieme autonomo di markup e di stili per creare alcuni degli oggetti di base del vostro sito, come una “call-out box” che viene usata spesso, i pulsanti o il modo in cui si dispone orizzontalmente un elenco di link. In Editorially, ho documentato tutte le possibili variazioni di stile di pulsanti e link. Quindi, dovrete continuare aggiungendo l’esatto markup di cui avete bisogno per ogni elemento della vostra guida.<\/p>\n Per esempio, per un pulsante nella guida di Editorially, ho semplicemente messo Proseguite l’esplorazione del vostro sito e aggiungete tutti i pattern che vedete: potreste usare dei layout particolari pi\u00f9 e pi\u00f9 volte o un pattern per un media object o un pattern per un elenco verticale. Di seguito potete vedere un altro esempio tratto da South Tees Hospital, che mostra alcuni dei loro pattern per quelli che chiamano “feature blocks”. Cercate cose simili sul vostro sito per documentarle nella guida.<\/p>\n South Tees Hospital.<\/p>\n<\/div>\n Eccoci al momento giusto per chiedere al proprio team cos’altro sarebbe utile avere nella style guide. Condividetela, permettete loro di darle un’occhiata e sperate che vi aiutino a riempirla con tutti i pattern e i moduli necessari. Non dimenticatevi di farvi aiutare dall’intero team<\/em> per completarla, perch\u00e9 si tratta di una risorsa per tutti.<\/p>\n Se possibile. aggiungete le parti interattive utilizzate dal vostro sito, come i dropdown, le modali o i tooltip, che altro non sono che piccoli “hover” con del testo utile che d\u00e0 informazioni aggiuntive all’utente. Questo permette al vostro team di vedere non solo le versioni statiche di questi elementi, ma anche le animazioni. Cos\u00ec, quando guarderete la guida e passerete sopra a un oggetto o ci cliccherete, questi funzioneranno proprio come sul vostro sito.<\/p>\n I tooltip nella guida di Editorially.<\/p>\n<\/div>\n Se dovete fare del lavoro extra per aggiornare la style guide quando fate dei cambiamenti al look and feel, le probabilit\u00e0 che rimanga aggiornata sono piuttosto basse. L’ho gi\u00e0 ripetuto altre volta, ma questo \u00e8 il motivo per cui abbiamo collegato la guida di Editorially allo stesso CSS dell’applicazione: in questo modo non dovevamo aggiornare manualmente la guida. Pu\u00f2 essere difficile rendere prioritari gli aggiornamenti alla guida, ma il mantenimento \u00e8 di vitale importanza. A seconda della rapidit\u00e0 delle vostre iterazioni sul sito o sull’applicazione, dovreste controllare la guida come se fosse un task da ripetere regolarmente, con scadenza settimanale o mensile. Quando fate dei cambiamenti al vostro sito, inserite nel workflow anche l’aggiornamento della style guide.<\/p>\n Una volta che avete incluso nella guida la maggior parte dei componenti del vostro sito o della vostra applicazione, c’\u00e8 un’abbondanza di tool per renderla ancora pi\u00f9 comoda. Mentre stavo realizzando la style guide per Editorially, un collega mi fece notare il fantastico tool di Filament Group, X-rayHTML<\/a>, che \u00e8 una piccola libreria JavaScript che ci aiuta a creare documentazione. X-rayHTML prende gli oggetti che hanno uno stile sulla vostra pagina e genera un blocco di codice ben formattato sotto di essi, senza che voi dobbiate aggiungere altro codice. Potete anche aggiungere prism.js<\/a> per la “syntax highlighting”, che assegna un colore alle varie parti del codice, per aumentarne la leggibilit\u00e0.<\/p>\n Uno sguardo alla style guide di Editorially con X-rayHTML all’opera.<\/p>\n<\/div>\n Se siete interessati all’automazione, ci sono altri tool che possono rendere ancor pi\u00f9 semplice la creazione di una style guide. Due di questi includono KSS<\/a> e Hologram<\/a>. Entrambe questi strumenti utilizzano i commenti o YAML all’interno dei vostri fogli di stile in combinazione con qualcosa come Ruby per generare automaticamente la style guide. Ci vorr\u00e0 un po’ di lavoro per andare a ritroso e fare il retrofitting dei vostri fogli di stile con i commenti appropriati o con YAML per questi approcci, ma risparmierete del tempo sul lungo periodo, perch\u00e9 questi tool rendono il mantenimento molto pi\u00f9 semplice. Inoltre, A List Apart<\/cite> ha messo la sua pattern library su GitHub e ha pubblicato un blog post<\/a> sulla sua creazione, mostrando un altro metodo per creare una style guide. Le possibilit\u00e0 riguardo a ci\u00f2 che potete fare sono molte di pi\u00f9 di quelle che ho evidenziato qui: potete cercare un po’ in giro per vedere quali possano essere pi\u00f9 utili per voi e per il vostro team.<\/p>\n<\/div>\n Bene, adesso che avete fatto tutto questo lavoro e avete creato la guida, cosa succede? Come facciamo in modo che tutti la usino? Il primo passo consiste nel parlarne: se un nuovo membro del team si unisce a voi, mostrategli la guida come modo per orientarsi sul sito, dal momento che contiene cos\u00ec tante informazioni sia sul linguaggio visuale sia sul codice del front-end.<\/p>\n Finch\u00e9 iterate su un sito o su un’applicazione, la vostra style guide non sar\u00e0 mai davvero ultimata. Ma avere da subito qualcosa di documentato e mostrarlo ai colleghi nel vostro team per avere il loro feedback \u00e8 di grande aiuto. Coinvolgete l’intero team nella creazione della guida, cos\u00ec che sia la guida del team<\/em> e fate in modo che tutti investano del tempo nel suo mantenimento e la usino regolarmente.<\/p>\n Abbiamo reso disponibile la guida di Editorially sia come public repo su GitHub<\/a> sia online<\/a>. \u00c8 stato veramente un “work in progress” ma ne \u00e8 risultato un documento interno al nostro team, per cui ci sono anche note, pattern e tanta confusione. Ma la ragione per cui la mostriamo \u00e8 per rinforzare l’idea che una style guide non deve apparire perfetta per essere utile. Nonostante il disordine, tutto quello che contiene \u00e8 stato estremamente utile per me e per gli altri membri del team man mano che proseguivamo con il lavoro sull’applicazione.<\/p>\n Allora, vi ho convinto? Vorreste avere una style guide per il vostro sito o per la vostra applicazione? Ne vale davvero la pena: ricavatevi del tempo, coinvolgete il vostro team e cominciate a crearla. La ricompensa sar\u00e0 un documento che far\u00e0 accelerare le discussioni e lo sviluppo del vostro sito.<\/p>\n Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":" Una style guide, nota anche come pattern library, \u00e8 un documento sempre in evoluzione che descrive in dettaglio il codice front-end per tutti gli elementi e per tutti i moduli che compongono un sito web o un’applicazione. Inoltre, documenta il linguaggio visuale del sito, dagli stili per l’header alla palette di colori. In breve, una style guide ben fatta \u00e8 una guida onnicomprensiva a cui pu\u00f2 far riferimento l’intero team quando deve decidere sui cambiamenti e sulle iterazioni da fare su un sito. Susan Robertson ci mostra come creare e mantenere una style guide che aiuti tutti, dai product owners e product producers ai designer e agli sviluppatori a mantenere il brand e gli obiettivi di un sito in continuo mutamento.<\/p>\n","protected":false},"author":818,"featured_media":7000729,"comment_status":"open","ping_status":"open","template":"","categories":[7,258,272,110,275],"tags":[],"coauthors":[417],"class_list":["post-456","article","type-article","status-publish","has-post-thumbnail","hentry","category-design","category-graphic-design","category-layout-and-grids","category-numero-93-28-maggio-2014","category-tipografia-web-font"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/456","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=456"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000729"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=456"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\nPerch\u00e9 dovrei usare una style guide?<\/h2>\n
![](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/05\/south-tees-panel.png\")
<\/p>\n![](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/05\/yelp-buttons.png\")
<\/p>\n\nStep per creare una guida<\/h2>\n
Assemblate le basi del vostro sito<\/h3>\n
![](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/05\/yelp.png\")
<\/p>\nAggiungete pi\u00f9 pattern<\/h3>\n
<label for=\"btn\" class=\"btn\" href=\"#\">.btn <input type=\"submit\" name=\"btn\" value=\".btn\" \/><\/label><\/code>. E siccome abbiamo un link allo stesso CSS dell’applicazione, il CSS viene mostrato in maniera corretta nella style guide. Se dovessimo cambiare lo stile di .btn<\/code>, cambierebbe anche la style guide.<\/p>\n![](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/05\/southtees.png\")
<\/p>\nDocumentate l’interattivit\u00e0<\/h3>\n
![](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/05\/ed-tooltips.png\")
<\/p>\nRendete semplice il mantenimento<\/h3>\n
Iterate sulla vostra guida<\/h3>\n
![](\"images\/stories\/articoli\/n0093\/style-guide\/styleguide-06-Aug-messages.png\")
<\/p>\n\nUsare la guida<\/h2>\n