Kiedy warto używać zmiennych CSS zamiast preprocesorów

W nowoczesnym front-endzie nie chodzi o to, by wybrać „CSS variables zamiast SCSS”, ale o to, by umieć rozpoznać właściwe zastosowanie dla każdego narzędzia. W tej lekcji skupimy się na sytuacjach, w których custom properties wygrywają – i tam, gdzie naprawdę warto ich używać zamiast zmiennych preprocesora.

1. Motywy (np. tryb ciemny / jasny)

To klasyczny przypadek użycia zmiennych CSS – możemy zdefiniować zestaw kolorów w :root i nadpisywać je klasą .dark, bez potrzeby pisania dodatkowych stylów.

:root {
  --color-bg: #ffffff;
}

body.dark {
  --color-bg: #121212;
}

Komponenty po prostu używają var(--color-bg), niezależnie od trybu – nie musisz ich modyfikować.

2. Komponenty zależne od kontekstu

Zmienne CSS działają na zasadzie dziedziczenia – komponent może dostosowywać się do otoczenia bez zmiany klas lub struktury HTML.

.section-accent {
  --button-bg: #ffcc00;
}

.button {
  background-color: var(--button-bg);
}

Ten sam komponent .button wygląda inaczej w zależności od kontekstu nadrzędnego.

3. Dynamiczne style modyfikowane JavaScriptem

Zmienne CSS można zmieniać z poziomu JavaScriptu bez rekompilacji – co nie jest możliwe w przypadku SCSS.

document.documentElement.style.setProperty('--color-primary', '#e6007e');

To pozwala na dynamiczne motywy, personalizację wyglądu przez użytkownika itp.

4. Przełączanie tematów w locie (bez przeładowania strony)

Nie musisz ładować osobnych plików CSS – wystarczy zmiana klasy w <body> lub modyfikacja zmiennych przez JavaScript.

5. Praca z komponentami webowymi / frameworkami

Gdy tworzysz komponenty np. w Web Components, React, Vue – zmienne CSS są „przenikalne” między warstwami i pozwalają łatwo konfigurować styl bez ingerencji w kod.

<my-card style="--card-bg: #fffbe6;"></my-card>

Niezależnie od technologii – komponent może działać z zewnętrznymi zmiennymi, co ułatwia jego ponowne wykorzystanie.

Kiedy NIE warto polegać wyłącznie na zmiennych CSS?

Są sytuacje, w których zmienne preprocesora (SCSS) są lepsze:

gdy potrzebujesz złożonych operacji matematycznych (np. kolor = ciemniejszy o 20%)
gdy chcesz wygenerować setki klas (np. skala odstępów: .m-1, .m-2)
gdy stylujesz strukturę szablonu raz – statycznie i nie zamierzasz jej modyfikować w runtime

Dobre praktyki

Używaj custom properties tam, gdzie użytkownik lub środowisko może wpływać na wygląd
Stosuj zmienne globalne w :root, a komponentowe – lokalnie
Unikaj mieszania zmiennych CSS i SCSS w tym samym pliku – oddziel je warstwowo

Wniosek

Custom properties nie zastępują preprocesorów – ale są niezastąpione w kontekście komponentów, motywów i dynamicznego UI. Jeśli coś może zmieniać się w czasie rzeczywistym – lepiej użyć zmiennych CSS. Jeśli coś nigdy się nie zmieni – SCSS będzie prostszy i szybszy.

Previous Temat

Back to Zagadnienie

Next Temat