styled-components: CSS-in-JS pro React

styled-components přináší nový přístup ke stylování React komponent — CSS přímo v JavaScriptu s plnou silou jazyka. Konec CSS class name kolizí.

Problémy tradičního CSS v komponentovém světě¶

CSS bylo navrženo pro dokumenty, ne pro komponenty. V React aplikaci s desítkami komponent narážíte na:

• Globální scope** — class names kolidují across komponent
• Dead code** — nevíte, které styly jsou ještě používané
• Dynamické styly** — CSS nemá přístup k props a stavu
• Co-location** — styly jsou oddělené od komponent, které stylují

styled-components řeší všechny tyto problémy.

Tagged template literals¶

styled-components používá ES6 tagged template literals:

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? '#00d4ff' : 'transparent'};
  color: ${props => props.primary ? '#040c0f' : '#00d4ff'};
  font-size: 1rem;
  padding: 0.5rem 1.5rem;
  border: 2px solid #00d4ff;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background: #00d4ff;
    color: #040c0f;
  }
`;

// Použití
<Button primary>Hlavní akce</Button>
<Button>Sekundární</Button>

Každá komponenta generuje unikátní class name — žádné kolize, žádný BEM, žádný overhead.

Výhody CSS-in-JS¶

Proč CSS-in-JS dává smysl:

• Scoping** — automaticky izolované styly per komponenta
• Dynamické styly** — plný přístup k props a stavu
• Dead code elimination** — smažete komponentu, styly zmizí s ní
• Theming** — ThemeProvider pro konzistentní design tokens
• Server-side rendering** — critical CSS extraction automaticky
• TypeScript podpora** — typované props pro styly

Kritika a alternativy¶

CSS-in-JS není bez kontroverzí:

• Runtime overhead — styly se generují v JavaScriptu
• Bundle size — styled-components přidává ~12KB gzipped
• Learning curve pro CSS puristy
• Debugging — generované class names jsou nečitelné (řeší babel plugin)

Alternativy: CSS Modules (build-time scoping), Emotion (výkonnější runtime), Glamorous (API inspirované styled-components).

Závěr: nový standard pro React styling¶

styled-components mění způsob, jakým přemýšlíme o stylování v React aplikacích. Pro nové React projekty doporučujeme CSS-in-JS jako výchozí přístup — výhody v produktivitě a údržbě převažují nad drobnými nevýhodami.