Jak učinit svůj kód snadno udržovatelný s průvodci živého stylu

Průvodcové stylů minulého století jsou typicky považováni za dokumenty orientované na design zaměřené na značení a barevné využití. Ale s příchodem velice rozsáhlých kódových základen pro weby, jako je Facebook nebo obrovská škála produktů společnosti Google, se průvodce stylů od té doby vyvíjel.

V dnešních dnech obsahují vodítka živého stylu vždy aktuální dokumentaci aktuální kódové základny a jejích případů použití. Pomocí těchto dokumentů můžeme napsat mnohem více udržovatelného a opakovaně použitelného kódu a okamžitě vidět, jak je optimalizována naše databáze kódů.

Co je v živém průvodce?

Životní styl průvodce jsou podobné starším protějškům; obsahují informace o značkách a značkách, barevné využití, stejně jako obecný nástin použití kódu. V sekci kódové osnovy můžete jednoduše najít duplicitní nebo podobně podobný kód a kombinovat ho s cílem optimalizovat kódovou základnu nebo zobrazit komponenty, které se již používají. Většina průvodců buď předvádí přístup založený na stylu "log", kde je dokumentována každá instance kódu nebo je dokumentován pouze záměrně modulární kód.

Nejenže se tyto průvodci zaměřují na HTML a CSS, ale i na další jazyky, které mohou být modularizovány pro výkon jako JavaScript a PHP. Několik pevných příkladů průvodce živého stylu se nachází na adrese Github , Mozilla , a MailChimp . Jak můžete vidět z těchto příkladů, je běžné mít buď stránku, nebo podstránku, aby se zobrazovaly vedle sebe vedle sebe jednotlivé případy použití kódů pro každou komponentu. Díky tomu je snadné jít a chytit je, když je potřebujete, a pro neznámé designéry nebo vývojáře, abyste zjistili, jak komponenty fungují interaktivně.

Spuštění vašeho průvodce živého stylu

Začátek vlastní dokumentace k životnímu stylu od nuly může vypadat strašně, zvláště u větších projektů. Obvykle je však návratnost investice času potřebného k tomu, aby se to udělalo. Větší projekty těží z živé dokumentace stylů stránek a struktury kódu. Menší projekty mají méně nápadné, ale někdy stále stojí za to, návratnost investice do času. V každém případě, pokud pracujete na projektu, který může být někdy předán jinému návrháři nebo vývojáři, učiní tak svůj den, aby takovou dokumentaci viděli.

Začněte s nadací

Komponenty, které používáte často, jsou nejlépe použitelné u živého průvodce, tlačítka okamžitě přicházejí do paměti. Krátký seznam věcí, které byste chtěli uvažovat o dokumentaci, jsou možnosti rozvržení (případně vymezení systému mřížky), typografie, použití barev, tlačítka a styly stylu, styl stylu, upozornění nebo upozornění a seznam stylů. Jen něco, co může být prospěšné z opakovaného použití, by mohlo být v podstatě přidáno. Při nastiňování si nezapomeňte udržovat věci pružné. Nikdy nestlačte výstrahu nebo tlačítko specifické pro jednu stránku nebo pouzdro, pokud to není absolutně nutné. Namísto toho přidejte třídy modifikátorů, které staví na základních základech, jako je barva, typografie nebo estetické změny. Tímto způsobem můžete vždy počítat s třídou .button, abyste označili konzistentní šířku, výšku a velikost textu a současně umožnily třídám modifikátorů měnit věci zvlášť pro každý případ použití.

Cíle udržovatelného kódu

Cílem udržovatelného kódu je, aby věci byly opakovaně použitelné a aby byly v budoucnu chráněny. Komponenty, jako jsou oznamovací pruhy, tlačítka, záhlaví a zápatí, jsou skvělými příklady opakovaně použitelného kódu - věci, které můžete použít vícekrát na webu nebo na stejné stránce. Pokud porušujete starý nebo již napsaný kód, aby byl po této skutečnosti udržitelnější, je to vlastně docela jednoduché. Začněte tím, že odtáhnete CSS dolů na základy. Měli byste zůstat s třídou komponent, která definuje strukturální věci jako výška, šířka a poloha. Zatímco další třídy modifikátorů lze použít ke změně estetických věcí, jako je barva nebo typografie. Dále, pokud váš projekt používá pro každé stránce ID nebo třídu těla, můžete tímto způsobem vytvářet jedinečné případy použití na stránce. Ujistěte se, že se k této praxi příliš nepoužíváte, neboť může snadno přidat váhu ke stylu průvodce.

The KISS Princip je konstrukční princip vhodný i pro modulární vývojový proces. Psaní jednoduchého, udržovatelného kódu je obvykle nejjednodušší tím, že vaše komponenty jsou jednoduché. Pokud jde o jednoduchost, je-li možné efektivněji dělat věci a / nebo použít méně kódu při současném dosažení stejného výsledku, musí být k tomu zapsány naše komponenty. Konečným cílem udržovatelné struktury kódu je mít něco opakovaně použitelného, ​​malého a nesmírně efektivnějšího, než jeho nepotřebný protějšek.

Pojmenování konvencí v CSS

Pokud jde o práci s udržitelnou strukturou kódu, jsou pojmy pojmenování velmi důležité. Psaní popisných tříd CSS zažije dlouhou cestu, abyste zajistili, že zachování kódu bude snadný úkol. Tady je bez omezení na délce třídy CSS, použijte to ve svůj prospěch. Ujistěte se, že budete držet jasnou pojmenování pojmenování, ačkoli, míchání pomlčky vs podtržítka nebo případ velbloudu vs všechny malé názvy mohou snadno dostat matoucí. Obvykle je skvělý nápad, aby se vaše třída komponenty velmi popisovala, zatímco třídy modifikátorů jsou méně. Níže je uveden příklad tlačítka, jedinečného pravidla pro případ použití a tříd modifikátorů.

  / * Jedná se o třídu komponent, měla by obsahovat pouze základní strukturální pravidla * /. Tento jedinečný případ použití popisuje použité tlačítko na domovské stránce * / .cost-cta-button {display: blockmargin: 0 auto 50px; width: 180px; height: 60px; line-height: 60px;} / * Níže jsou uvedeny třídy modifikátorů, třídy přidat barvu nebo jiné estetické změny * / červená {pozadí: # C54F48}. uzavřena {okraj-poloměr: 5px;} 

Automatizovaná řešení

Automatické generátory stylových průvodců se začaly objevovat vlevo a vpravo, aby pomohly tlačit vodítka stylů. Stylový prototyp je generátor SASS, který postavili Ram Richard a Mason Wendell z Tým SASS . Je to jedna z lepších možností, která je v současné době k dispozici, s podobnými generátory Hologram , Kalei , StyleDocco , a KSS což se také ukázalo jako užitečné.

Automatizované versus ručně řemeslné

Jako vždy existují klady a zápory, které používají některou metodu zde. Automatizovaná řešení jsou rychlá a mohou být použity po faktu, ale jsou také někdy přísné. Ručně řemeslní průvodci vás zanechají vědět, co se děje, ale potřebujete více času. Osobně je pro mne nejlepším přístupem, který je nejvhodnější pro většinu případů, protože je to nejpružnější, pokud jde o práci s dalšími vývojáři. Ale určitě stojí za to vyzkoušet některé automatizované řešení, abyste získali představu o tom, jak fungují a co říkají o vašem kódu.

Kontrola kódu

Webové stránky nejsou nikdy dokončeny. Modifikujeme věci, přecházíme na nové styly a trendy a nakonec můžeme skončit spoustou kódu z minulých revizí. Je důležité si chvíli vzít a podívat se zpět na "konec" každé revize, abyste se ujistili, že věci jsou tak čisté, jak mohou být. V tomto okamžiku jsem také rád hodil každou složku (a třídu modifikátorů) do a Codepen testovat podporu prohlížeče a vytvářet poznámky odpovídajícím způsobem. To by mohlo ušetřit spoustu času později, pokud navrhujete stránku s omezeními podpory. Při kontrole se také nezapomeňte věnovat pozornost komponentům, které se mohou navzájem konfliktně lišit, nebo způsobit problémy modelového pole.

Závěr

Závěrem by měl průvodce stylem vyústit v kód, který je velmi manipulativní a flexibilní, avšak stále se snadno udržuje a čte. Vzhledem k tomu, kolik času musíme investovat, abychom takový výsledek dosáhli, mají průvodce živého stylu mnohem vyčíslivější vliv na větší projekty než na menší. Komplexní nebo velké projekty mají prospěch ze všech optimalizací a zvýšení výkonnosti, že stojí za to, že stráví čas na dosažení uvedených výsledků. Vytvoření průvodce živého stylu pro malou webovou stránku nebo projekt nemusí být hodný časové investice.

Na závěr bychom se měli všichni usilovně snažit napsat čistý a udržitelný kód, který by se zaměřil na ochranu před budoucností. Průvodci s živým stylem mají tendenci povzbudit takový pracovní postup a pobídku, aby se vývojáři i diváci mnohem spokojeněji.

Doporučený snímek / náhled, programování obrazu přes Shutterstock.