Come rendere il tuo codice facilmente gestibile con le guide di stile di vita

Le guide di stile di un tempo sono generalmente pensate come documenti orientati al design incentrati sul branding e sull'uso del colore. Ma con l'avvento di codebase follemente grandi per siti Web come Facebook o la vasta gamma di prodotti di Google, le guide di stile si sono evolute da allora.

In questi giorni, le guide dello stile di vita contengono sempre una documentazione aggiornata dell'attuale base di codice e dei suoi casi d'uso. Con questi documenti possiamo scrivere molto più codice manutenibile e riutilizzabile, vedendo all'istante quanto ottimizzata è la nostra base di codice.

Cosa c'è in una guida allo stile di vita?

Le guide di stile vivente sono simili alle controparti precedenti; contengono informazioni su logo e branding, utilizzo del colore e una descrizione generale dell'uso del codice. La sezione del profilo del codice consente di trovare facilmente codice duplicato o simile e combinarlo per ottimizzare il codice base o visualizzare i componenti già in uso. La maggior parte delle guide mostra un approccio in stile "log" in cui ogni istanza di codice è documentata, o solo il codice intenzionalmente modulare è documentato.

Queste guide non si concentrano solo su HTML e CSS, ma anche su altri linguaggi che possono essere modularizzati per prestazioni come JavaScript e PHP. A pochi esempi solidi di guide di stile vivente può essere trovato a Github , Mozilla , e MailChimp . Come si può vedere da questi esempi, è comune avere una pagina o un sito secondario per visualizzare casi d'uso affiancati al codice per ciascun componente. In questo modo è facile andare a prenderli quando ne hai bisogno e ai designer o agli sviluppatori sconosciuti per vedere come i componenti funzionano in modo interattivo.

Inizia la tua guida di stile di vita

Iniziare da zero la propria documentazione di guida dello stile di vita può sembrare scoraggiante, soprattutto per i progetti più grandi. Ma in genere c'è un ritorno sull'investimento di tempo necessario per farlo. I progetti più grandi beneficiano immensamente di una documentazione vivente sugli stili del sito e sulla struttura del codice. I progetti più piccoli hanno un ritorno meno evidente, ma a volte ancora utile, sul tuo investimento in termini di tempo. In entrambi i casi, se stai lavorando a un progetto che un giorno potrebbe essere consegnato a un altro designer o sviluppatore, renderà il loro giorno utile per vedere tale documentazione.

Inizia con le fondamenta

I componenti che usi frequentemente sono il miglior caso d'uso per una guida di stile, i pulsanti vengono in mente immediatamente. Un breve elenco di cose che potresti prendere in considerazione per la documentazione sono le opzioni di layout (possibilmente delineano un sistema a griglia), la tipografia, l'uso del colore, i pulsanti e gli stili di collegamento, lo stile dei moduli, le notifiche o gli avvisi e lo stile degli elenchi. Quasi tutto ciò che può trarre beneficio dall'essere riutilizzabile potrebbe essere aggiunto essenzialmente. Nel delineare, ricorda di mantenere le cose flessibili. Mai stile un avviso o un pulsante specifico per una pagina o caso d'uso, a meno che non sia assolutamente necessario. Invece, aggiungi le classi di modifica per costruire sulla base di base per cose come il colore, la tipografia o le modifiche estetiche. In questo modo, puoi sempre contare sulla classe .button per designare una larghezza, un'altezza e una dimensione del testo coerenti, consentendo allo stesso tempo alle classi modificatore di cambiare le cose specifiche per ogni caso d'uso.

Gli obiettivi del codice gestibile

Lo scopo del codice gestibile è rendere le cose riutilizzabili e a prova di futuro. Componenti quali barre di notifica, pulsanti, intestazioni e piè di pagina, sono ottimi esempi di codice riutilizzabile: cose che puoi utilizzare più volte sul sito o sulla stessa pagina. Se stai rompendo il codice vecchio o già scritto per renderlo più mantenibile dopo il fatto, in realtà è piuttosto semplice. Inizia spogliando il CSS fino alle basi. Dovresti essere lasciato con una classe componente che definisce cose strutturali come altezza, larghezza e posizione. Mentre le classi modificatore aggiuntive possono essere usate per cambiare cose estetiche come il colore o la tipografia. Inoltre, se il progetto utilizza un ID o una classe del corpo per ogni pagina, è possibile creare in questo modo casi d'uso esclusivi per pagina. Assicurati di non ricorrere troppo a questa pratica, dato che può facilmente aggiungere peso alla tua guida di stile.

Il Principio di KISS è un principio di design adatto anche per il processo di sviluppo modulare. Scrivere codice semplice e gestibile è in genere più semplice mantenendo i componenti semplici. Quando si tratta di semplicità, se è possibile rendere le cose più efficienti e / o utilizzare meno codice ottenendo lo stesso risultato, i nostri componenti dovrebbero essere scritti per farlo. Gli obiettivi finali di una struttura di codice gestibile è avere qualcosa di riutilizzabile, piccolo e molto più efficiente di una controparte non gestibile.

Convenzioni di denominazione in CSS

Quando si tratta di lavorare con una struttura di codice gestibile, le convenzioni di denominazione diventano molto importanti. Scrivere classi di CSS descrittive farà un lungo cammino per garantire che il mantenimento della base di codice sia un compito facile. C'è Senza limiti sulle lunghezze delle classi CSS, quindi usa questo a tuo vantaggio. Assicurati di attenersi a una chiara convenzione di denominazione, tuttavia, poiché i trattini di miscelazione rispetto ai caratteri di sottolineatura o al caso di cammello e tutti i nomi in minuscolo possono facilmente confondersi. Di solito è una buona idea rendere le classi dei componenti molto descrittive, mentre le classi dei modificatori lo fanno meno. Di seguito è riportato un esempio di pulsante, una regola del caso d'uso univoco e classi di modifica.

  / * Questa è una classe componente, dovrebbe contenere solo regole strutturali di base * /. Button {display: block; width: 250px; height: 48px; line-height: 48px;} / * Questo caso d'uso unico delinea un pulsante usato sulla home page * /. homepage-cta-button {display: blockmargin: 0 auto 50px; larghezza: 180px; altezza: 60px; altezza-riga: 60px;} / * Di seguito sono elencate le classi di modifica, aggiunte al componente classe per aggiungere colore o altre modifiche estetiche * /. red {background: # C54F48} .rounded {border-radius: 5px;} 

Soluzioni automatizzate

Generatori di guide di stile automatizzati hanno iniziato a spuntare a sinistra ea destra per aiutare a spingere per le guide di stile. Prototipo di stile è un generatore SASS costruito da Ram Richard e Mason Wendell di Team SASS . È una delle migliori opzioni disponibili al momento, con generatori simili come Ologramma , Kalei , StyleDocco , e KSS dimostrando anche utile.

Automatizzato vs fatto a mano

Come sempre, ci sono pro e contro nell'usare entrambi i metodi qui. Le soluzioni automatizzate sono veloci e possono essere utilizzate dopo il fatto, ma a volte sono anche severe. Le guide di stile realizzate a mano ti lasciano conoscere i dettagli di tutto, ma impiegano più tempo. Personalmente, l'approccio artigianale è il migliore per me nella maggior parte dei casi in quanto è il più flessibile in termini di collaborazione con altri sviluppatori. Ma vale sicuramente la pena provare alcune delle soluzioni automatizzate, solo per avere un'idea di come funzionano e cosa dicono del tuo codice.

Rivedere il tuo codice

I siti web non sono mai finiti. Modifichiamo le cose, passiamo a nuovi stili e tendenze e alla fine possiamo finire con un sacco di codice dalle revisioni passate. È importante prendere un momento e guardare indietro alla "fine" di ogni revisione per assicurarsi che le cose siano pulite come possono essere. A questo punto, mi piace anche lanciare ogni componente (e classi di modifica) in a Codepen per testare il supporto del browser e prendere appunti di conseguenza. Questo potrebbe risparmiare un sacco di tempo dopo se stai progettando una pagina con vincoli di supporto. Durante la revisione, assicurati anche di tenere d'occhio i componenti che potrebbero entrare in conflitto tra loro in modi strani o causare problemi con il modello a scatola.

Conclusione

In conclusione, le guide di stile dovrebbero risultare in un codice molto manipolativo e flessibile, ma comunque facile da gestire e leggere. Considerando quanto tempo dobbiamo investire per raggiungere un tale risultato, le guide di stile di vita hanno un effetto molto più quantificabile su progetti più grandi di quelli più piccoli. I progetti complessi o di grandi dimensioni traggono beneficio da tutte le ottimizzazioni e gli aumenti delle prestazioni che valgono il tempo speso per raggiungere tali risultati. Tuttavia, la creazione di una guida allo stile di vita per un piccolo sito Web o progetto potrebbe non rivelarsi degna del tempo investito.

In conclusione, dovremmo tutti sforzarci di scrivere un codice pulito e gestibile che si concentri sulla verifica futura. Le guide di stile di vita tendono a incoraggiare questo flusso di lavoro e aiutano a rendere gli sviluppatori e gli spettatori molto più felici.

Immagine in primo piano / miniatura, immagine di programmazione via Shutterstock.