Client-First ve Webflow: co to je, proč a jak ho používat

Co je Client-First

Client-First je systém stylování pro Webflow od Finsweet. Sami ho popisují jako „soubor zásad a strategií, které nám pomáhají stavět weby ve Webflow“. Není to plugin ani šablona, kterou si nainstalujete. Je to způsob pojmenování tříd, struktury stránek a práce s mezerami, na kterém se shodne celý tým.

Finsweet ho staví na čtyřech cílech: být předvídatelný, přehledný, konzistentní a být dobrým partnerem pro klienta. Zjednodušeně: kdo projekt otevře, má mu rozumět bez zaškolení.

Pro agentury je to důležité, protože projekty přecházejí z ruky do ruky: od designéra k vývojáři, od agentury ke klientovi, od jednoho vývojáře k dalšímu.

Pojmenování tříd: utility, custom a combo třídy

Jádrem systému je pojmenování. Dokumentace ke strategii tříd popisuje tři druhy.

• Utility třídy jsou globální a píšou se bez podtržítek, například background-color-primary nebo text-size-large. Hodnoty berou z proměnných, takže změna proměnné změní všechny prvky, které třídu používají.
• Custom třídy patří ke konkrétní komponentě, sekci nebo prvku a používají podtržítko, například header_background-layer nebo team-list_headshot-wrapper. Část před podtržítkem je skupina, část za ním prvek.
• Combo třídy jsou varianty základní třídy s prefixem is-, například button is-brand. Základní třída je vždy první.

Názvy jdou od obecného ke konkrétnímu: text-size-large, ne large-size-text. Client-First také nedoporučuje nabalovat na jeden prvek hodně tříd, protože se to špatně upravuje v panelu Styles. Raději vytvořte jednu custom třídu, která drží výsledné stylování.

Struktura stránky a spacing systém

Základní struktura je soustava vrstev okolo obsahu stránky:

• page-wrapper kolem všeho na stránce;
• main-wrapper, ideálně se značkou <main>, přičemž navigace a patička zůstávají mimo něj;
• section_[identifikátor], nativní sekce Webflow pro každou část stránky;
• container-large (existují i small a medium), který centruje obsah a nastavuje maximální šířku.

U mezer spacing strategie používá jednu pevnou škálu názvů pro padding, margin i gap: xxtiny, xtiny, tiny, xxsmall, xsmall, small, medium, large, xlarge, xxlarge, huge, xhuge a xxhuge. Název vždy znamená stejnou vzdálenost, takže padding-bottom-medium a gap-medium si odpovídají.

V praxi se marginy na nadpisy nebo tlačítka dávají zřídka. Používá se spacing block (prázdný div s jednou třídou, třeba padding-bottom-medium, mezi dvěma sourozenci) nebo spacing wrapper (div, který obaluje jeden prvek). Zpočátku to působí zvláštně, ale komponenty zůstávají znovupoužitelné, protože každá instance může mít vlastní mezeru bez změny sdílené komponenty.

Verze: v2, v2.1 a v3 s proměnnými

Oficiální changelog uvádí hlavní kroky:

Podle Finsweet verze 3 rozděluje proměnné do kolekcí Base, Theme, Typography, Layout a Sizes. Mezery mají jednu třídu na jedno rozhodnutí, například padding-bottom-large, místo kombinace třídy směru a třídy velikosti. Hodnoty se mohou lišit podle breakpointu díky režimům proměnných ve Webflow, takže na změnu mezer na tabletu nebo mobilu nepotřebujete další combo třídy.

V3 je v době psaní čerstvá novinka. Mnoho živých webů běží na v2 nebo v2.1 a základní myšlenky jsou stejné: jasné názvy, utility pro sdílené styly, custom třídy s podtržítky. Před úpravou projektu zjistěte, kterou verzi používá, a v jednom projektu systémy nemíchejte.

Výhody a nevýhody

Výhody

• Předvídatelnost. Vývojář, který systém zná, se rychle zorientuje i v projektu, který nestavěl.
• Snazší předání. Jasné názvy pomáhají netechnickým editorům i dalšímu vývojáři. To je hlavní důvod, proč ho agentury přijímají.
• Konzistence. Jedna škála mezer a jedna sada utilit brání tomu, aby se stylesheet plnil náhodnými hodnotami.
• Design odpovídá stavbě. Soubor z Figmy s jasnou škálou a pojmenovanými styly se téměř přímo mapuje na proměnné a třídy. Viz předání z Figmy do Webflow.
• Dokumentovaný a rozšířený. Existuje veřejná dokumentace, takže nemusíte psát vlastní standard.

Nevýhody

• Křivka učení. Pravidla s podtržítky, spacing bloky a wrappery chtějí pár dní zvyku.
• Víc prvků v Navigatoru. Wrappery a bloky přidávají vrstvy, což některým vývojářům vadí.
• Vyžaduje disciplínu. Systém funguje, jen když ho dodržují všichni. Pár zkratek a projekt se rozpadá.
• Rozdíly mezi verzemi. Převod projektu z v2 na v3 je záměrný refaktoring, ne jedno kliknutí.

Kdy ho nepoužít

Ve třech případech bych váhal.

• Klient už má jiný systém. Pokud interní tým spravuje web ve Webflow podle vlastní konvence, řiďte se jí. Konzistentní projekt v jiném systému je lepší než napůl převedený Client-First.
• Jednorázová stránka s krátkou životností. Kampaňová stránka, která za měsíc zmizí, nepotřebuje plnou strategii pojmenování, i když pár čistých názvů pořád pomůže.
• Extrémně individuální zážitky. Velmi autorské animované stránky se strukturou také těží, ale části systému možná upravíte, místo abyste ho dodržovali striktně.

I tehdy platí stejné minimum: předvídatelné názvy, škála mezer a žádné náhodné jednorázové hodnoty.

Jak pomáhá při předání klientům a dalším vývojářům

Pro klienty je přínos praktický. Názvy tříd popisují, co věci jsou, takže editor, který otevře Designer, s menší pravděpodobností něco omylem rozbije. Pro dalšího vývojáře je struktura povědomá, takže zaučení se měří v hodinách čtení, ne ve dnech zpětného dohledávání.

Pro agentury to snižuje riziko. Když váš Webflow vývojář není k dispozici, může v projektu pokračovat jiný vývojář znalý Client-First bez dlouhého zaškolování. Právě na to se doporučuji zeptat v článku o chybách při subdodávce.

Pomůže i krátká předávací poznámka: kterou verzi Client-First projekt používá, kde jsou proměnné a jaké jsou záměrné odchylky.

Můj pohled: proč stavím na Client-First

Stavím na Client-First (Finsweet), ať pracuji přímo pro klienta, nebo white-label pro agenturu. Důvod je prostý: nechci, aby moje práce záležela na mně.

Když stavím ve Webflow workspace agentury a končím Loom prohlídkou, projekt má dávat smysl dalšímu člověku, který ho otevře. Společný systém pojmenování je k tomu nejlevnější cesta. Nejvíc záleží u projektů s CMS a mnoha šablonami, například katalog přes 1 100 luxusních hodinek Big Moe Watches, který jsem postavil white-label přes Landrieau Studio, nebo web Stone Hedge Capital s CMS, který navrhl Boldhuman.

Jsem i designér, takže mám rád, když designový soubor už sleduje jasnou škálu. Mapování na třídy a proměnné je pak téměř mechanické. Jak obecně spolupracuji s agenturami, najdete v článku white-label Webflow vývoj, nebo mi rovnou pošlete projekt.

Časté otázky

AutorPeter CekanakDesignér a Webflow vývojář · white-label partner pro agentury

Od roku 2018 navrhuji a stavím weby ve Webflow pro agentury a startupy — Client-First, GSAP, CMS a AI automatizace. Weby, které jsem postavil, pomohly klientovi k exitu za 10 mil. $ a jednomu SaaS ztrojnásobily poptávky dema.

Webflow Certified ExpertRelume ExpertClient-First