Dynamiczne zmienne i override’y lokalne

Dynamiczne zmienne i override’y lokalne

Zmiennych CSS można używać nie tylko globalnie (np. w :root), ale również lokalnie – w obrębie dowolnego selektora. To daje ogromną elastyczność: możemy dostosować wygląd komponentów w zależności od ich otoczenia, bez pisania nowych klas ani nadpisywania stylów.

Zmienne lokalne – jak działają?

Zmienna zadeklarowana w :root działa wszędzie – dopóki nie zostanie nadpisana lokalnie, np. w konkretnym komponencie lub elemencie nadrzędnym.

:root {
  --color-primary: #0057ff;
}

.card {
  background-color: var(--color-primary); /* #0057ff */
}

.section-accent {
  --color-primary: #ff5500; /* nadpisanie lokalne */
}

Wewnątrz `.section-accent`, komponent `.card` pobierze nową wartość `–color-primary`. Poza tą sekcją – nadal używana będzie wartość globalna.

Praktyczny przykład

<section class="section-accent">
  <div class="card">
    <h2>Wyróżniona karta</h2>
  </div>
</section>

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

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

.section-accent {
  --color-card-bg: #ffeecc;
}

.card {
  background-color: var(--color-card-bg);
  padding: 1rem;
  border-radius: 8px;
}

Efekt? Karta wewnątrz `.section-accent` będzie miała inny kolor tła – bez zmieniania jej stylów ani dodawania dodatkowych klas.

Override zmiennej „w locie”

Zmienną CSS można nadpisać również inline – np. za pomocą JavaScriptu:

<div class="card" style="--color-card-bg: #ffdddd;">
  Karta z dynamicznym tłem
</div>

To przydatne np. przy generowaniu interfejsów na podstawie danych z API.

Zagnieżdżanie komponentów z lokalnymi zmiennymi

Dzięki dziedziczeniu zmiennych, komponent może automatycznie dopasować się do kontekstu nadrzędnego – bez potrzeby pisania wielu klas. Przykład:

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

Tu użyto wartości domyślnej: jeśli `–card-title-color` nie istnieje, zostanie użyty kolor `#333`.

Dobre praktyki

• Stosuj zmienne lokalne tam, gdzie komponent ma działać w różnych kontekstach
• Nie nadpisuj zmiennych wewnątrz komponentu – zostaw to nadrzędnym warstwom (np. sekcjom)
• Używaj wartości domyślnych w var() – np. var(--button-bg, #444)
• Unikaj pisania dodatkowych klas, jeśli wystarczy zmienna lokalna

Ćwiczenie

Stwórz komponent .alert zawierający tło i kolor tekstu zależny od zmiennych:

• globalnie tło to np. --alert-bg: #f8f8f8
• w klasie .section-warning nadpisz zmienną --alert-bg na #fff3cd
• dodaj też zmienną --alert-color dla tekstu

Następnie umieść jeden komponent .alert wewnątrz sekcji z nadpisaniem i jeden poza nią – zobacz efekt.

Wniosek

Zmienne CSS to nie tylko „zamienniki kolorów” – to fundament dynamicznych i kontekstowych interfejsów. Dzięki lokalnym override’om możesz tworzyć komponenty, które dostosowują się do otoczenia – bez duplikacji klas, bez JavaScriptu, bez komplikacji. To esencja nowoczesnego CSS.