Základní komponenty, od tlačítek po bannery, jsou klíčové pro uživatelskou zkušenost a musí být přístupné, flexibilní a výkonné napříč různými scénáři. S narůstajícím počtem komponent na některých stránkách se však objevily problémy s výkonem spojené s tehdy používaným řešením CSS-in-JS.
Tyto problémy zahrnovaly delší časy načítání stránek kvůli inicializaci stylů na klientovi, pokles výkonu server-side renderingu (SSR), jelikož se sběr stylů přesunul z klienta na server, a obtížnou správu aktualizací stylů s rostoucím počtem komponent. Bylo zřejmé, že je potřeba nalézt alternativu, která by eliminovala tyto dodatečné náklady na klientovi i serveru, a to bez narušení stability systému během migrace.
Jako řešení se ukázaly CSS Moduly. Tento formát umožnil vývojářům využívat nativní CSS funkce a zároveň zachovat výhody kolokace a zapouzdření, na které byli zvyklí z CSS-in-JS. Styly se nyní píší v samostatném CSS souboru vedle JavaScriptového kódu komponenty. Klíčovou vlastností je, že všechny názvy tříd jsou ve výchozím nastavení lokální, což zabraňuje kolizím s globálními selektory. CSS Moduly navíc odstraňují potřebu jakéhokoli runtime chování na klientovi či serveru, jelikož styly jsou přímo zahrnuty do CSS šablon odesílaných jako součást HTML stránky.
Přechod na CSS Moduly však představoval radikální změnu oproti dosavadnímu řešení. Vyžadoval aktualizaci každé komponenty v design systému Primer i všech komponent využívajících tuto techniku napříč systémem. Naštěstí design systémy poskytují ideální platformu pro řízení takto rozsáhlých změn.
Pro implementaci této změny byla zvolena inkrementální migrační strategie. Pro každou komponentu byl vytvořen nový soubor překládající stávající styly do CSS Modulů. Následně byla komponenta zařazena pod funkcionalitní přepínač (feature flag), který umožňoval přepínat mezi starými a novými styly. Pomocí vizuálních regresních testů se ověřovala identičnost vzhledu mezi oběma řešeními. Postupně se pak funkcionalitní přepínač uvolňoval – nejprve internímu týmu, poté zaměstnancům a nakonec všem uživatelům, aby se odchytily případné problémy v raných fázích.
Tento proces zajistil silnou zpětnou vazbu a umožnil včasné odhalení problémů. Použití funkcionalitních přepínačů zajistilo bezpečnou migraci a zároveň poskytovalo jasné signály o výkonnostních přínosech CSS Modulů. Do prosince 2024 byly všechny komponenty v Primeru migrovány na CSS Moduly. Výsledkem bylo celkové zlepšení výkonu, zejména 55% zkrácení doby pro server-side rendering stránky a 25% zkrácení doby inicializace komponent.
S jasnými výsledky migrace v Primeru se objevila otázka, zda by podobné přínosy mohly být dosaženy i v jiných částech systému. Dalším krokem bylo tedy postupné odstranění řešení CSS-in-JS z celého produktu. Jednou z nejnáročnějších částí bylo odstranění vlastnosti `sx`, která sloužila k dynamickému stylování a přizpůsobení komponent. Ačkoli poskytovala vynikající podporu TypeScriptu a kolokaci s komponentou, její dynamická povaha vedla k vysokým nákladům za běhu a špatné škálovatelnosti při větším počtu komponent na stránce.
Prvním krokem k opuštění CSS-in-JS bylo snížení používání `sx` napříč celým kódem. To vedlo k okamžitému zlepšení výkonu, podobně jako při migraci komponent Primeru. Pro usnadnění přechodu a zachování zpětné kompatibility byla vytvořena přechodná knihovna, která umožňovala i nadále používat `sx` s nově migrovanými komponentami. To umožnilo postupný přechod a zároveň realizaci výkonnostních zisků pro ty části kódu, které již přešly na přímé importy.
Chystáte nový web nebo aplikaci?
Napište mi, co plánujete — rád se na to podívám a poradím, jak na to nejlépe jít.
Další fáze migrace probíhala balíček po balíčku: veškeré použití `sx` bylo převedeno na ekvivalentní soubory CSS Modulů, importy ze staré knihovny byly nahrazeny importy z nové a poté následovalo důkladné testování a nasazení. Oznámení o přechodu `styled-components` do režimu údržby potvrdilo, že zvolený směr byl správný.
Práce, zahájené v dubnu 2025, zahrnovaly migraci přibližně 7 760 instancí `sx` a trvaly do května 2026. Pro automatizaci procesu byly vyvinuty interní nástroje, včetně doplňku pro VS Code a codemodů pro migraci celých souborů. Tým osmi inženýrů migroval 6 419 vlastností během šesti měsíců, přičemž pozoroval zlepšení výkonu server-side renderingu v rozmezí 1 % až 22 % na některých stránkách. V dubnu 2026, kdy se práce znovu zintenzivnily, se zbývající počet 895 `sx` propů podařilo snížit na nulu během tří týdnů díky odhodlání týmu dvou inženýrů a efektivnímu využití interních automatizačních nástrojů.
Poslední výzvou bylo oddělení tématu (themingu) od `styled-components`. Systém podporoval sedm různých témat, z nichž každé mělo variantu s vysokým kontrastem, a všechny byly závislé na `styled-components`. Téma samotné bylo definováno v CSS, ale závislost spočívala v JavaScriptových utilitách. Opětovně byl použit postup postupné migrace s funkcionalitními přepínači. Během dvou měsíců se podařilo závislosti odstranit.
K červnu 2026 přešel systém plně na CSS Moduly. Zavedená bezpečnostní opatření umožnila bezpečné nasazení významných architektonických změn, testování v produkčním prostředí, odhalování a efektivní opravy chyb. To vše vedlo k úspěšnému dosažení cílů a realizaci značných výkonnostních zisků. Původně zamýšlená migrace CSS se nakonec stala postupnou refaktorizací způsobu, jakým systém stylování, tématování a dodávání uživatelského rozhraní ve velkém měřítku. Byly odstraněny `sx`, `styled-components` a `styled-system` z kódu, aniž by došlo k narušení stability systému, což výrazně zlepšilo výkon a uživatelskou zkušenost.