Matyas.
SlužbyProjektyZkušenostiBlogKontakt
ENOzvěte se
Zpět na slovník
web-devreact

CSS-in-JS

CSS-in-JS je přístup, při kterém se styly píší přímo v JavaScriptových souborech, často společně s komponentami, které stylují. Knihovny jako Styled Components, Emotion a Stitches generují unikátní názvy tříd při sestavení nebo za běhu, čímž eliminují konflikty stylů. Ačkoli tento přístup umožňuje dynamické stylování na základě props a plné zapouzdření, trend se kvůli výkonnostním obavám přesouvá k řešením bez runtime zátěže a utility-first CSS.

#web-dev#react

Související pojmy

Přetažení (drag and drop)

Drag and drop je interakční vzor, který umožňuje uživatelům přesouvat, přeřazovat nebo přenášet prvky rozhraní kliknutím (nebo dotykem), podržením a přetažením na novou pozici. Používá se pro nahrávání souborů, kanban nástěnky, řaditelné seznamy a editory rozvržení. HTML Drag and Drop API poskytuje nativní podporu v prohlížečích, zatímco knihovny jako dnd-kit a react-beautiful-dnd nabízejí propracovanější, přístupnější a dotykově přívětivější implementace.

Hot reload

Hot reload je vývojová funkce, která vloží aktualizovaný kód do běžící aplikace bez jejího restartování nebo ztráty aktuálního stavu. Ve Flutteru hot reload funguje vložením aktualizovaného Dart zdrojového kódu do běžícího Dart VM, obvykle se dokončí za méně než sekundu. React Native nabízí podobnou funkci zvanou Fast Refresh, která zachovává stav komponent během úprav. Obě funkce dramaticky urychlují vývojovou zpětnou vazbu ve srovnání s tradičními cykly kompilace a restartu.

CSS animace

CSS animace využívají pravidla `@keyframes` a vlastnost `animation` k tvorbě složitých, vícekrokových animací čistě v CSS bez JavaScriptu. V kombinaci s CSS transitions pro jednoduché změny stavu pokrývají tyto nástroje většinu potřeb UI animací s dobrým výkonem, protože prohlížeče je mohou optimalizovat na GPU kompozičním vlákně. Vlastnosti jako `transform` a `opacity` jsou obzvláště efektivní k animování, protože nespouštějí přepočty rozvržení ani překreslování.

Container queries

Container Queries umožňují CSS stylům reagovat na velikost rodičovského kontejneru místo viewportu prohlížeče, čímž řeší dlouhodobé omezení media queries. Označením elementu jako kontejneru pomocí `container-type` mohou jeho potomci využívat pravidla `@container` k přizpůsobení rozvržení podle rozměrů kontejneru. To umožňuje skutečně znovupoužitelné komponenty — komponenta karty se může přeuspořádat, ať už je v postranním panelu nebo v sekci na celou šířku.

Designový systém

Designový systém je sbírka znovupoužitelných komponent, pravidel a standardů, které zajišťují vizuální a funkční konzistenci napříč produktem nebo skupinou produktů. Typicky zahrnuje knihovnu komponent, design tokeny, typografická pravidla, barevné palety a dokumentaci. Designové systémy propojují práci designérů a vývojářů a umožňují týmům stavět rozhraní rychleji při zachování jednotného vzhledu.

Media queries

Media queries jsou funkce CSS, která umožňuje podmíněně aplikovat styly na základě vlastností zařízení, jako je šířka viewportu, výška, orientace, preference barevného schématu nebo omezení pohybu. Jsou základem responzivního webového designu a umožňují různá rozvržení pro mobily, tablety a desktopy. Moderní media queries také podporují detekci uživatelských preferencí pomocí `prefers-color-scheme` a `prefers-reduced-motion` pro přístupnější zážitky.

Všechna slova
Matyas.

Weby, mobilní appky a automatizace s AI. Pomáhám firmám šetřit čas i peníze technologií, která opravdu funguje.

Odkazy

  • Služby
  • Projekty
  • Zkušenosti
  • Blog
  • Slovník
  • Kontakt

Připravuji

  • Případové studieBrzy
  • Zdroje

© 2026 Matyas Prochazka. Všechna práva vyhrazena.