Zmienne a architektura komponentowa

Gdy pracujesz z komponentami – kartami, przyciskami, banerami, formularzami – potrzebujesz spójnego i skalowalnego sposobu na zarządzanie ich kolorami, rozmiarami i stylami. W tej lekcji nauczysz się, jak używać zmiennych CSS w podejściu komponentowym, zgodnie z metodyką BEM i strukturą ITCSS.

Dlaczego to ważne?

W dużym projekcie, w którym występują dziesiątki komponentów, chcesz, aby każdy z nich:

był niezależny (czyli działał w każdym kontekście),
mógł być modyfikowany bez wpływu na inne,
działał poprawnie w różnych motywach (np. light/dark),
miał swoje własne zmienne, ale też korzystał z globalnych.

Globalne vs lokalne zmienne komponentów

Dobrym podejściem jest rozdzielenie zmiennych na:

globalne – np. kolory główne, spacingi, fonty – trzymane w :root lub w settings/ (ITCSS)
lokalne dla komponentu – np. kolor tła karty, padding w przycisku – nadawane w klasie komponentu (np. .card)

Przykład: komponent `.card`

:root {
  --color-primary: #0057ff;
  --font-base: "Segoe UI", sans-serif;
}

.card {
  --card-bg: #ffffff;
  --card-border: #e0e0e0;
  --card-radius: 8px;

  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  font-family: var(--font-base);
  padding: 1rem;
}

Jeśli karta ma wyglądać inaczej w innym kontekście, możemy lokalnie nadpisać tylko te zmienne:

.featured {
  --card-bg: #f5faff;
  --card-border: #3399ff;
}

<div class="card">Zwykła karta</div>

<div class="card featured">Wyróżniona karta</div>

Modularność i niezależność

Zastosowanie zmiennych bezpośrednio w klasie komponentu daje Ci:

modularność – komponent zawiera swój „zestaw stylów”, który można nadpisać z zewnątrz,
elastyczność – zamiast wielu klas wariantów, wystarczy zmiana zmiennej,
izolację – komponent działa bez zależności od innych klas globalnych.

Integracja z BEM

Zmienne mogą być również stosowane wewnątrz elementów komponentu BEM:

.card {
  --card-title-color: #333;
}

.card__title {
  color: var(--card-title-color);
}

Dzięki temu możesz modyfikować np. tylko kolor tytułu, nie zmieniając stylu całego komponentu.

Integracja z ITCSS

W ITCSS zmienne komponentowe trafiają do warstwy components, natomiast globalne do settings. Przykład struktury:

/scss/
├── settings/
│   └── _colors.scss      → zmienne: --color-primary, --font-base
├── components/
│   ├── _card.scss        → zmienne: --card-bg, --card-border
│   └── _button.scss      → zmienne: --button-bg, --button-radius

Każdy komponent trzyma swoje własne zmienne, ale korzysta też z globalnych – np. kolorów motywu lub typografii.

Ćwiczenie

Stwórz komponent .button, który zawiera:

lokalne zmienne: --button-bg, --button-color, --button-radius
stylowanie przy użyciu tych zmiennych
klasę .button--alt, która nadpisuje --button-bg i --button-color

Następnie użyj tego komponentu w dwóch kontekstach – domyślnym i alternatywnym – bez zmieniania struktury HTML.

Wniosek

Zmienne CSS doskonale wspierają podejście komponentowe – pozwalają budować izolowane, konfigurowalne bloki interfejsu, które są gotowe na motywy, kontekst i skalowanie. Dzięki integracji z BEM i ITCSS możesz tworzyć systemy stylów, które są przejrzyste, elastyczne i odporne na zmiany.

Previous Temat

Back to Zagadnienie

Next Quiz

Zmienne a architektura komponentowa