Čo je CSS-in-JS?
CSS-in-JS je prístup k štýlovaniu webových komponentov, pri ktorom sa CSS píše priamo v JavaScripte. Umožňuje dynamické štýly, automatický scoping a elimináciu nepoužitého CSS. Populárne knižnice sú styled-components a Emotion.
Definícia CSS-in-JS
Čo je CSS-in-JS
CSS-in-JS je technika, pri ktorej sa CSS štýly definujú v JavaScripte namiesto samostatných .css súborov. Tento prístup spopularizoval Christopher Chedeau (vjeux) z Facebooku v roku 2014 prednáškou o problémoch CSS vo veľkých aplikáciách.
CSS-in-JS rieši viaceré problémy tradičného CSS: globálny namespace (konflikty názvov), nepoužité štýly, dynamické hodnoty závislé od props a ťažkú údržbu v rozsiahlych projektoch.
Populárne CSS-in-JS knižnice
- styled-components — najpopulárnejšia knižnica, používa tagged template literals
- Emotion — výkonná a flexibilná, ponúka css prop aj styled API
- Vanilla Extract — zero-runtime prístup, generuje CSS v čase build-u
- Panda CSS — moderná build-time knižnica s type-safe tokenmi
- Stitches — near-zero runtime s variantami a tokenmi
Runtime vs. build-time
Tradičné CSS-in-JS (styled-components, Emotion) generujú štýly v runtime — v prehliadači pri renderovaní. To má výkonnostný dopad. Moderné riešenia (Vanilla Extract, Panda CSS) extrahujú CSS v čase build-u, čo eliminuje runtime penaltu. Trend sa posúva smerom k zero-runtime riešeniam a utility-first CSS (Tailwind).
Praktický príklad
Príklad: Komponent Button so styled-components.
Tradičné CSS: Vytvoríte button.css s triedou .btn-primary. Risiko: iný vývojár v inom súbore použije rovnakú triedu a prepíše štýly.
CSS-in-JS: const Button = styled.button`background: blue; padding: 12px 24px;`. Knižnica automaticky vygeneruje unikátnu triedu (napr. .sc-bdVTJa) — žiadny konflikt.
Výhoda: Štýly sú priradené ku komponentu, automaticky sa odstránia pri zmazaní komponentu a podporujú dynamické hodnoty cez props.
Často kladené otázky
Čo je CSS-in-JS?
CSS-in-JS je prístup k štýlovaniu, pri ktorom sa CSS píše priamo v JavaScripte. Umožňuje automatický scoping, dynamické štýly a elimináciu nepoužitého CSS.
Je CSS-in-JS lepší ako Tailwind CSS?
Závisí od projektu. CSS-in-JS ponúka dynamické štýly a scoping. Tailwind CSS je rýchlejší (zero runtime), má menšiu krivku učenia a generuje menší CSS. Oba prístupy majú opodstatnenie.
Má CSS-in-JS vplyv na výkon?
Runtime CSS-in-JS (styled-components, Emotion) má merateľný výkonnostný dopad, pretože generuje štýly v prehliadači. Zero-runtime riešenia (Vanilla Extract, Panda CSS) tento problém eliminujú.
Je CSS-in-JS vhodný pre Next.js?
S React Server Components v Next.js sú runtime CSS-in-JS knižnice problematické. Pre Next.js sú lepšie Tailwind CSS, CSS Modules alebo zero-runtime riešenia ako Vanilla Extract.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.