Hur man gör din kod enkelt upprätthållbar med Living Style Guides

Style guides of yesteryear anses typiskt som designorienterade dokument som fokuserar på branding och färganvändning. Men med tillkomsten av vansinnigt stora kodbaser för webbplatser som Facebook eller Googles stora utbud av produkter har stilguider sedan utvecklats.

Dessa dagar innehåller levande stilguider alltid aktuell dokumentation av den aktuella kodbasen och dess användarfall. Med dessa dokument kan vi skriva mycket mer underhållbar och återanvändbar kod samtidigt som vi ser direkt hur optimerad vår kodbas är.

Vad finns i en levande stilguide?

Levande stilguider liknar de äldre motsvarigheterna; de innehåller logotyp och branding information, färganvändning, samt en allmän översikt över kodanvändning. Kodkonturavsnittet är där du enkelt kan hitta dubbletter eller liknande koden och kombinera den för att optimera kodfältet eller se komponenter som redan används. De flesta guider visar antingen en "log" -stilstilning där varje kodinstans dokumenteras eller endast den avsiktligt modulära koden dokumenteras.

Dessa guider fokuserar inte bara på HTML och CSS, utan även på andra språk som kan moduleras för prestanda som JavaScript och PHP. Några soliga exempel på levande stilguider finns på github , Mozilla , och MailChimp . Som du kan se från de här exemplen är det vanligt att ha en sida eller en undersida för att visa användarfall sida vid sida med koden för varje komponent. Detta gör det enkelt att gå och ta tag i dem när du behöver dem, och för obekanta designers eller utvecklare att se hur komponenter fungerar på ett interaktivt sätt.

Börjar din egen levande stilguide

Börja med din egen dokumentation för levande stil, från början, kan tyckas skrämmande, speciellt för större projekt. Men vanligtvis finns det en avkastning på investeringen av den tid som krävs för att få det gjort. Större projekt gynnas oerhört av en levande dokumentation av sidstilar och kodstruktur. Mindre projekt har en mindre märkbar, men ibland fortfarande värt, återvända på din investering. I båda fallen, om du arbetar på ett projekt som en gång kan överlämnas till en annan formgivare eller utvecklare, kommer det att göra dagen för att se sådan dokumentation.

Börja med stiftelsen

Komponenter du använder ofta är det bästa användningsområdet för en levande stilguide, knappar kommer ihåg omedelbart. En kort lista över saker du kanske vill överväga att dokumentera är layoutalternativ (eventuellt skissera ett nätverkssystem), typografi, färganvändning, knappar och länkstilar, formulär styling, meddelanden eller varningar och list styling. Nästan allt som kan dra nytta av att återanvändas kan läggas till i huvudsak. När du skisserar, kom ihåg att hålla sakerna flexibla. Ställ aldrig in en varning eller knapp som är specifik för en sida eller användningsväska, om inte absolut nödvändigt. Istället lägger du till modifierarklasser för att bygga på den grundläggande grunden för saker som färg, typografi eller estetiska förändringar. På så sätt kan du alltid räkna med .knappen för att ange en konsekvent bredd, höjd och textstorlek samtidigt som modifierarklasserna ändrar saker som är specifika för varje användningsfall.

Målen för underhållsbar kod

Syftet med underhållsbar kod är att göra sakerna återanvändbara och framtidssäkra. Komponenter som anmälningsfält, knappar, rubriker och sidfot, är bra exempel på återanvändbar kod - saker du kan använda flera gånger på hela sidan eller på samma sida. Om du bryter gammal eller redan skriven kod för att göra det mer underhållbart efter det faktum är det faktiskt ganska enkelt. Börja med att ta bort CSS ner till grunderna. Du bör lämnas med en komponentklass som definierar strukturella saker som höjd, bredd och position. Medan ytterligare modifierings klasser kan användas för att ändra estetiska saker som färg eller typografi. Dessutom, om ditt projekt använder ett kropps-ID eller en klass för varje sida, kan du ställa unika användningsfall på en sida på så sätt. Var noga med att inte tillgripa denna övning för mycket, eftersom det lätt kan lägga vikt på din stilguide.

De KISS Princip är också en designprincip som passar väl för den modulära utvecklingsprocessen. Att skriva enkel, underhållbar kod är oftast enklaste genom att hålla dina komponenter enkla. När det gäller enkelhet, Om det är möjligt att göra saker effektivare och / eller använda mindre kod samtidigt som samma resultat uppnås, ska våra komponenter skrivas för att göra det. Slutmålen för en underhållbar kodstruktur är att få något återanvändbart, litet och väldigt effektivare än en ohållbar motpart.

Namngivna konventioner i CSS

När det gäller att arbeta med en underhållsbar kodstruktur blir namngivningskonventioner mycket viktiga. Skrivande beskrivande CSS-klasser kommer att gå långt för att säkerställa att du behåller din kodbas kommer att vara en lätt uppgift. Det finns ingen gräns på CSS klasslängder, så använd detta till din fördel. Se till att hålla fast vid en tydlig namngivningskonvention, men blanda streck mot understrykning eller kamelfall vs alla små bokstäver kan lätt bli förvirrande. Det är vanligtvis en bra idé att göra dina komponentklasser väldigt beskrivande, samtidigt som modifierarklasserna blir mindre. Nedan visas ett exempel på en knapp, en unik användningsregel och modifierings klasser.

  / * Detta är en komponent klass, den ska bara innehålla grundläggande strukturella regler * /. Knapp {display: block; bredd: 250px; höjd: 48px; linjehöjd: 48px;} / * Detta unika användningsfall beskriver en knapp som används på hemsidan * /. hemsida-cta-knappen {display: blockmargin: 0 auto 50px; bredd: 180px; höjd: 60px; linjehöjd: 60px;} / * Nedan finns modifierar klasser, dessa läggs till förutom komponenten klass för att lägga till färg eller andra estetiska ändringar * /. röd {bakgrund: # C54F48} .rounded {border-radius: 5px;} 

Automatiserade lösningar

Automatiserad stilstyrningsgeneratorer har börjat dyka upp till vänster och höger för att hjälpa till med push for style guides. Style Prototype är en SASS-generator byggd av Ram Richard och Mason Wendell of Team SASS . Det är en av de bättre alternativen ute där just nu, med liknande generatorer som Hologram , Kalei , StyleDocco , och KSS vilket också visar sig användbart.

Automatiserad vs handgjord

Som alltid finns det flera fördelar och nackdelar att använda någon av metoderna här. Automatiserade lösningar är snabba och kan användas efter det faktum, men de är också ibland strikta. Handgjorda stilguider låter dig veta insatserna och allting, men ta mer tid. Personligen är det handgjorda tillvägagångssättet bäst för mig i de flesta fall eftersom det är den mest flexibla när det gäller att arbeta med andra utvecklare. Men det är verkligen värt att prova några av de automatiserade lösningarna, bara för att få en uppfattning om hur de fungerar och vad de säger om din kod.

Granskar din kod

Webbplatser är aldrig färdiga. Vi ändrar saker, övergång till nya stilar och trender, och i slutändan kan vi sluta med mycket kod från tidigare revisioner. Det är viktigt att ta en stund och titta tillbaka på "slutet" av varje revision för att se till att sakerna är så rena som de kan vara. Vid denna tidpunkt gillar jag också att kasta varje komponent (och modifierarklasser) i en Codepen för att testa webbläsarsupport och göra anteckningar i enlighet med detta. Detta kan spara mer tid senare om du utformar en sida med stödbegränsningar. Vid granskning bör du också vara säker på att hålla koll på komponenter som kan störa varandra på olika sätt eller orsaka problem med boxmodellen.

Slutsats

Sammanfattningsvis bör stilguider resultera i kod som är mycket manipulerande och flexibel men ändå lätt att underhålla och läsa. Med tanke på hur mycket tid vi måste investera för att nå ett sådant resultat, har levande stilguider en mycket mer kvantifierbar inverkan på större projekt än mindre. Komplexa eller stora projekt gynnas så mycket av optimering och prestanda som det är väl värt att spendera tid för att nå nämnda resultat. Att skapa en levande stilguide för en liten webbplats eller ett projekt kan inte visa sig värt att investera i tiden.

Sammanfattningsvis bör vi alla sträva efter att skriva ren, underhållbar kod som fokuserar på framtidssäkerhet. Levande stilguider tenderar att uppmuntra ett sådant arbetsflöde och stödja att göra utvecklare och tittare lika mycket lyckligare.

Utvalda bild / miniatyrbild, programmeringsbild via Shutterstock.