CSS-in-JS - Zaawansowane Systemy Nawigacyjne

Styled-components to nie jedyna biblioteka CSS-in-JS. Istnieja inne, każda z unikalnymi zaletami. Poznajmy dwie najważniejsze: Emotion i vanilla-extract.

Emotion

Emotion to biblioteka CSS-in-JS, która oferuje dwa sposoby uzywania:

API obiektowe (

@emotion/react

)

1/** @jsxImportSource @emotion/react */
2import { css } from '@emotion/react';
3
4function SpacePanel({ isActive }) {
5  return (
6    <div css={css`
7      background: #0d1137;
8      border: 2px solid ${isActive ? '#00e676' : '#3949ab'};
9      border-radius: 12px;
10      padding: 20px;
11      transition: border-color 0.3s ease;
12    `}>
13      <h2>Navigation Panel</h2>
14    </div>
15  );
16}

Styled API (

@emotion/styled

)

1import styled from '@emotion/styled';
2
3const Card = styled.div`
4  background: #1a1a4e;
5  padding: 20px;
6  border-radius: 12px;
7`;
8
9// Lub obiektowa skladnia:
10const CardObj = styled.div({
11  background: '#1a1a4e',
12  padding: 20,
13  borderRadius: 12,
14});

Zalety Emotion

• Dwa API -- możesz używać template literals lub obiektów JS
• Lekki -- mniejszy bundle niż styled-components
• Wysoka wydajność -- zoptymalizowany runtime
• Prop css -- możesz dodac style bezpośrednio przez prop

  css

Vanilla-extract -- Zero-runtime CSS-in-JS

Vanilla-extract to zupelnie inne podejscie: style sa generowane w czasie kompilacji, nie w runtime. Zero JavaScript w bundlu klienta!

1// styles.css.ts
2import { style, globalStyle } from '@vanilla-extract/css';
3
4export const panel = style({
5  background: '#0d1137',
6  border: '2px solid #3949ab',
7  borderRadius: 12,
8  padding: 20,
9  ':hover': {
10    borderColor: '#7c4dff',
11  },
12});
13
14export const title = style({
15  color: '#7c4dff',
16  fontSize: 24,
17});

1// Component.tsx
2import { panel, title } from './styles.css.ts';
3
4function SpacePanel() {
5  return (
6    <div className={panel}>
7      <h2 className={title}>Panel</h2>
8    </div>
9  );
10}

Zalety vanilla-extract

• Zero runtime -- brak dodatkowego JS w przeglądarce
• TypeScript-first -- pelne typowanie, autouzupelnianie
• Bezpieczne typy -- błąd kompilacji gdy uzywasz nieistniejacego stylu
• Theming -- wbudowany system tematow że zmiennymi CSS

Porownanie CSS-in-JS

| Cecha | Styled-components | Emotion | Vanilla-extract | |-------|-------------------|---------|-----------------| | Runtime | Tak | Tak | Nie (zero-runtime) | | Bundle | Wiekszy | Sredni | Minimalny | | TypeScript | Dobre wsparcie | Dobre wsparcie | Natywny TS | | SSR | Wymaga konfiguracji | Wymaga konfiguracji | Bezproblemowy | | DX | Bardzo dobry | Bardzo dobry | Wymaga buildu |

Kiedy uzyc ktorej biblioteki?

Wybor biblioteki CSS-in-JS zalezy od kilku czynnikow:

Wybierz styled-components gdy:

• Twoj zespol zna juz te biblioteke -- jest najpopularniejsza i ma najwieksza spolecznosc
• Potrzebujesz bogatego ekosystemu pluginow i narzedzi
• Zalezy ci na czytelnosci kodu -- tagged template literals sa intuicyjne dla programistow znajacych CSS

Wybierz Emotion gdy:

• Chcesz elastycznosci -- mozesz uzywac zarowno template literals, jak i obiektow JS
• Zalezy ci na mniejszym rozmiarze bundla
• Uzywasz Next.js lub innego frameworka, gdzie Emotion ma lepsza integracje
• Potrzebujesz propa

  css

  do szybkiego dodawania stylow inline-like, ale z pelna moca CSS

Wybierz vanilla-extract gdy:

• Wydajnosc jest priorytetem numer jeden -- zero JS w bundlu klienta
• Uzywasz TypeScript i chcesz pelnne bezpieczenstwo typow
• Budujesz duza aplikacje, gdzie rozmiar bundla ma znaczenie
• Nie potrzebujesz dynamicznych stylow opartych na runtime props

Trend: zero-runtime CSS-in-JS

Coraz wiecej projektow przechodzi na rozwiazania zero-runtime, takie jak vanilla-extract, Panda CSS czy Linaria. Powod? W duzych aplikacjach runtime CSS-in-JS (styled-components, Emotion) moze spowalniać renderowanie, poniewaz generuje style w JavaScript podczas dzialania aplikacji.

Zero-runtime generuje klasy CSS w czasie kompilacji -- to jak przygotowanie mapy nawigacyjnej przed startem zamiast obliczania trasy w locie. Efekt: szybsze ladowanie strony i lepsze wyniki Core Web Vitals.

1// Panda CSS -- kolejna popularna zero-runtime alternatywa
2import { css } from '../styled-system/css';
3
4function Panel() {
5  return (
6    <div className={css({
7      bg: 'slate.900',
8      p: '4',
9      rounded: 'xl',
10      border: '2px solid',
11      borderColor: 'indigo.700'
12    })}>
13      Panel content
14    </div>
15  );
16}

Niezaleznie od wyboru biblioteki, kluczowe jest trzymanie sie jednego podejscia w ramach projektu i ustalenie konwencji z zespolem.