Čo sú Styleguides? Prečo, kedy a ako pomôžu Styleguides vašim projektom?

Stretnete sa aj s pojmom guidelines alebo pattern library. Všetky majú jeden cieľ. Zefektívniť určitý proces nastavením pravidiel a štandardov, čo pomáha firmám dosiahnuť vyššiu kvalitu produktov a procesov.

Guidelines vs Styleguides

Veľa zdrojov na internete pomenúva tieto pojmy rôzne, aj keď popisujú takmer to isté, malý rozdiel sa predsa len nájde. Vzhľadom na programovanie by som to popísal nasledovne:

Guidelines by sme mohli definovať ako všeobecné pravidlá a postupy firmy alebo produktu pre jeho vývoj. Stanovia sa pravidlá na používanie jednotnej syntaxe, formátovania, procesov, štruktúry projektu, naming conventions, git flow, Atomic Design / BEM a podobne.

Styleguides sú už konkrétne pravidlá aplikované v praxi, použité napríklad pri štýlovaní aplikácií a webových stránok. Výsledkom styleguides je balíček komponentov, ktoré sa nachádzajú v aplikácii. Najlepšie na jednom mieste prehľadne zobrazené a popísané, aby každý člen tímu vedel, čo sa v aplikácii používa. Najznámejším príkladom je pravdepodobne Bootstrap.

Aby sme sa nezamotali budeme v článku používať len pojem styleguides.

Styleguides ako nástroj na zefektívnenie pracovného postupu. Zdroj: www.unsplash.com
Styleguides ako nástroj na zefektívnenie pracovného postupu. Zdroj: www.unsplash.com

Prečo používať styleguides?

Cieľom každého projektu je výsledný produkt v požadovanej kvalite a čase. Ďalším cieľom je jeho údržba a vývoj do budúcnosti. Keďže styleguides zabezpečujú jasné pravidlá, terminológiu a procesy, môžeme sa viac sústrediť na funkčnosť, biznis požiadavky a nové nápady. Nestráca sa čas s rutinnými úlohami, vynaliezaním kolesa a fixovaním bugov.

V jednote je sila

Predstavte si, že vám do tímu príde nový človek a začne pracovať na projekte. Používa nové spôsoby, ako urobiť to, čo už máte hotové. Bude opakovať chyby, ktoré máte už dávno vyriešené. Jeho práca bude vytŕčať z identity vašej firmy. Či sa už jedná o programovanie, dizajn alebo písanie článkov. Každý má vlastný štýl, svoj podpis. To je super. Avšak v tíme musíte ťahať za jeden koniec. Je dobré vymýšlať nové veci, ktoré však musia stáť na spoľahlivých základoch.

Styleguides sa časom menia a upravujú podľa potreby organizácie. Pridávajú sa nové pravidlá, prvky, vylepšujú existujúce, a preto je nutné ich udržiavať. Tým, že sú na jednom mieste, je ľahké ich nájsť a odkázať sa na ne. Ako programátori sa vyhnete hádkam typu "tabs vs spaces". Btw na odsadenie používame 4 spaces - 4 medzery. Nesúďte nás.

Nekonečný súboj: Tabs vs Spaces

Kedy používať styleguides?

Vždy... ale nie, závisí to hlavne od projektu. Ak vytvárate mikrostránky alebo jednorazové kampane, nie je potrebné strácať čas vytváraním styleguides. Vezmete dizajn, naštýlujete ho, nasadíte a všetci sú šťastní. Pri dlhodobejších projektoch a vo väčších firmách je to povinnosť.

Určite ste už pracovali na projekte viacerí. Preto viete, že je dobré mať jednotnú predstavu ako písať kód, aké prvky sa na stránke/aplikácii/v grafike používajú, čo sa smie a čo nie. Kód by mal vyzerať ako by ho písal jeden človek, aj keď na ňom pracuje viacero programátorov. Web by mal vyzerať jednotne na všetkých stránkach. Identita firmy sa nesmie porušiť - preto je aj dizajn manuál vlastne styleguide ako používať logo a grafické prvky.

Styleguides neslúžia len na stránky. Používajú sa v programovaní, dizajne, pri písaní článkov alebo akejkoľvek činnosti, ktorá si vyžaduje systém pravidiel. 

Styleguides blogovej platformy Medium
Styleguides blogovej platformy Medium. Zdroj: www.medium.freecodecamp.org

Ako vytvoriť firemné styleguides?

Čo sa programovania týka, existuje veľa zdrojov, odkiaľ sa dá čerpať. Každý má vlastné preferencie. Hlavné je sa zhodnúť na jasných pravidlách ako tím. Pekným príkladom je spoločnosť MailChimp, ktorá zaviedla styleguides pre dizajn, obsah, e-mail aj grafické prvky. Uvediem pár zdrojov kde sa môžete inšpirovať:

Styleguides pre JavaScript:

Určite odporúčam dávať pozor na CSS:

Pre tvorbu obsahu napríklad:

Existujú dokonca aj pre písanie e-mailov:

a vygooglite kopec ďalších styleguides, aj pre iné jazyky.

Styleguides tiež nazývané ako pattern library. Zdroj: www. teamgaslight.com
Styleguides tiež nazývané ako pattern library. Zdroj: www. teamgaslight.com

Living styleguides alebo "žijúce" styleguides 

Jediná istota je zmena. To platí vo všetkom a v biznise najviac. Biznis sa musí neustále prispôsobiť trhu. Ako sa menia a pribúdajú požiadavky, mení sa aj vzhľad a funkčnosť aplikácií. To však nemusí nutne znamenať pribúdanie kódu. Vždy sme pyšní, keď odstránime nepoužívaný kód, prípadne niečo zrefaktorujeme, vylepšíme, zjednodušíme. Na to vedia dobre poslúžiť living styleguides. 

Living styleguides sú vytvorené:

  • pomocou HTML, CSS - prípadne JS
  • produkčného CSS
  • obsahujú interakcie (hover, active, prípadne aj použité animácie)
  • oddeľujú dizajn od kódu
  • sú v GITe
  • všetky elementy na jednej stránke (alebo podstránkach, ak je toho veľa - hlavne na jednom mieste)

Takisto nájdete aj nástroje na generovanie living styleguides

Nejaké otázky? Poďme si to zhrnúť 

Ak ste firma a máte viac ako jedného programátora / dizajnéra / copywritera odporúčame začať s písaním styleguides. Nemusí to byť 100-stranový dokument. Na začiatok stačí nejakých pár postrehov. Užitočné je mať takýto dokument online, aby k tomu mal prístup každý a všade. Napríklad, návod pre nových kolegov, pravidlá pre programátorov, základné procesy, postupy, až sa postupne vytvorí firemná wiki.

Ak začínate nový projekt s perspektívou do budúcnosti, je dobré začať dizajnovať / programovať jednotlivé komponenty. Grafici majú prehľad o všetkých prvkoch používaných v aplikácii, ktoré programátori naštýlujú a udržujú na jednom mieste. Ľahšie sa kontroluje kompatibilita zobrazovania prvkov medzi prehliadačmi a členovia tímu tak môžu použiť kód bez obavy, že sa niekde niečo "rozsype". Ak v styleguides komponent ešte neexistuje, jednoducho sa pridá nový.

Happy coding!