𝗗𝘆𝗻𝗮𝗺𝗶𝗰𝘇𝗻𝗲 𝗠𝗼𝘁𝘆𝘄𝘆 𝗕𝗲𝘇 𝗖𝗦𝗦-𝗶𝗻-𝗝𝗦

Byłem wielkim fanem styled-components. Uwielbiałem tę elastyczność. Potem jednak natrafiłem na ścianę.

Jeden z projektów wymagał zmniejszenia wagi runtime. Postanowiłem wypróbować CSS Modules i natywne CSS. Wynik mnie zaskoczył. Usunąłem styled-components, Emotion i goober ze swoich projektów. Nie straciłem niczego, czego faktycznie potrzebowałem.

Największą korzyścią nie była sama wydajność. Było nią wyeliminowanie zależności od stylizacji. W jednym z projektów runtime CSS-in-JS zajmował 30% bundle'a klienta.

Czyste CSS dojrzało. Nie potrzebujesz już ciężkich bibliotek JS do tych zadań:

• Zagnieżdżanie: Użyj natywnego zagnieżdżania CSS. • Zmiany kolorów: Użyj color-mix(). • Kontrola specyficzności: Użyj @layer. • Responsywne komponenty: Użyj container queries.

Oto jak zbudować motyw, używając tylko jednego pliku i właściwości niestandardowych (custom properties).

  1. Zdefiniuj tokeny w pliku CSS.
:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-accent: #3c7dc4;
}

[data-theme="dark"] {
  --color-bg: #14161a;
  --color-text: #f5f5f0;
  --color-accent: #6aa6e8;
}
  1. Użyj tych zmiennych w swoich komponentach.
.button {
  background: var(--color-accent);
  color: var(--color-bg);
}
  1. Zmieniaj motywy poprzez zmianę pojedynczego atrybutu.
function setTheme(theme) {
  document.documentElement.dataset.theme = theme;
  localStorage.setItem("theme", theme);
}

Komponenty nie potrzebują ThemeProvider. Nie muszą się ponownie renderować. Przeglądarka obsługuje aktualizację poprzez kaskadowość (cascade). Dzięki temu większość Twojej aplikacji może pozostać w Server Components.

Aby uniknąć „mignięcia” (flash) niewłaściwego motywu podczas ładowania strony, użyj małego skryptu inline w sekcji head dokumentu HTML:

Przestań używać JS do generowania stylów w czasie runtime. Używaj natywnych zmiennych CSS dla swoich tokenów. Skutkuje to mniejszą ilością kodu i szybszym czasem ładowania.

Źródło: https://dev.to/kirill_c_7b35589230/dynamic-theming-without-css-in-js-d7e