Korzystanie z zmiennych w zaawansowanych projektach

Korzystanie z zmiennych w zaawansowanych projektach

W tej lekcji pokażę Ci, jak korzystać ze zmiennych CSS w większych, bardziej złożonych projektach. Chodzi tu nie tylko o wygodę kodowania, ale o budowanie spójnego i łatwego w utrzymaniu systemu stylów – takiego, który będzie działał na całej stronie lub w aplikacji.

Dzięki zmiennym możesz tworzyć tzw. „design system” – czyli zestaw wartości opisujących kolory, typografię, rozmiary, odstępy i inne właściwości wizualne. To podejście jest standardem w profesjonalnym front-endzie.

1. Organizacja zmiennych – projektuj jak zespół

Warto grupować zmienne według kategorii – np. kolory, typografia, przestrzenie, komponenty. Dzięki temu nawet w większym pliku CSS wszystko będzie zrozumiałe i łatwe do znalezienia.

:root {
  /* Kolory */
  --color-primary: #1565c0;
  --color-secondary: #ff8f00;
  --color-bg: #fafafa;
  --color-text: #212121;

  /* Typografia */
  --font-base: 16px;
  --font-heading: 24px;

  /* Rozmiary i odstępy */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;

  /* Komponenty */
  --border-radius: 6px;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Dlaczego tak? Jeśli za miesiąc wrócisz do projektu albo będzie go rozwijać ktoś inny – wszystko będzie jasne i uporządkowane. To jak tworzenie dokumentacji wewnątrz CSS.

2. Budowanie komponentów opartych na zmiennych

Załóżmy, że tworzysz kartę produktu. Jeśli zamiast konkretnych wartości użyjesz zmiennych, możesz łatwo zmieniać jej wygląd globalnie. Przykład:

.card {
  background: var(--color-bg);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.card h3 {
  font-size: var(--font-heading);
  color: var(--color-primary);
}

Efekt działania: karta korzysta z tych samych zmiennych co inne komponenty – dzięki temu wszystko wygląda spójnie.

3. Różne motywy – nadpisywanie zmiennych lokalnie

Jeśli chcesz, by np. nagłówek miał inną kolorystykę niż reszta strony – możesz nadpisać zmienne lokalnie, w obrębie konkretnego elementu. To bardzo elastyczne podejście.

.header {
  --color-bg: #263238;
  --color-text: #ffffff;
  background: var(--color-bg);
  color: var(--color-text);
}

Efekt działania: zmienne zdefiniowane wewnątrz .header obowiązują tylko w tym elemencie. Poza nim używane będą te z :root.

4. Responsywność – zmienne w media queries

Zmiennymi możesz również sterować w zależności od rozmiaru ekranu – np. zmienić bazowy rozmiar czcionki:

:root {
  --font-base: 16px;
}

@media (min-width: 768px) {
  :root {
    --font-base: 18px;
  }
}

Efekt działania: tekst automatycznie zwiększy się na większych ekranach. Zamiast modyfikować każdy selektor osobno – zmieniasz tylko jedną wartość.

5. Zmienna sterowana JavaScriptem

To bardziej zaawansowane, ale warto wiedzieć: możesz zmieniać zmienne CSS dynamicznie z poziomu JavaScriptu, np. po kliknięciu przycisku „Zmień motyw”.

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

To otwiera drogę do ciemnych motywów, motywów użytkownika, ustawień dostępności itd. W wielu aplikacjach to standard.

Ćwiczenie – karta produktu ze zmiennymi

Stwórz komponent .product-card, który wykorzystuje zmienne do:

• tła i tekstu,
• nagłówka z innym kolorem,
• zaokrąglenia i cienia,
• wewnętrznych odstępów.

👉 Otwórz JSFiddle i przetestuj

<style>
:root {
  --color-bg: #ffffff;
  --color-text: #333333;
  --color-accent: #009688;
  --font-heading: 20px;
  --spacing-md: 20px;
  --border-radius: 8px;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.product-card {
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.product-card h3 {
  font-size: var(--font-heading);
  color: var(--color-accent);
}
</style>

<div class="product-card">
  <h3>Nowoczesna lampa LED</h3>
  <p>Stylowa i energooszczędna lampa do salonu.</p>
</div>

Podsumowanie

• Zmienne CSS są kluczowe przy budowaniu spójnych i elastycznych stylów.
• Możesz organizować je tematycznie, używać w komponentach, motywach i media queries.
• To podejście, które spotkasz w każdym nowoczesnym projekcie – nawet z frameworkami typu Tailwind czy Bootstrap 5.

W kolejnych modułach będziemy używać zmiennych jako stałego elementu projektowania CSS. To jeden z filarów profesjonalnego front-endu!