Recomandări esențiale pentru variabile CSS și funcții moderne

Variabile CSS și funcții moderne

CSS-ul modern nu mai e doar o listă statică de proprietăți. Cu variabile și funcții, putem crea teme, sisteme de spacing, culori dinamice și layout-uri responsive fără să repetăm cod.

1. Variabile CSS (`--nume`)

Variabilele CSS permit definirea unor valori reutilizabile, ușor de modificat. Se definesc în interiorul unui selector (de obicei :root) și se accesează cu var().

:root {
  --primary-color: #3498db;
  --spacing: 16px;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing);
}

🔧 Exemplu live - Variabile CSS

<button class="button">Click</button>

:root {
  --primary-color: #3498db;
  --spacing: 12px;
}

.button {
  background: var(--primary-color);
  color: white;
  padding: var(--spacing);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

2. Funcții moderne: `calc()`, `clamp()`, `min()`, `max()`

Aceste funcții permit calcule direct în CSS, utile pentru layout-uri responsive și scalabile.

calc() - combină unități: width: calc(100% - 20px)
clamp() - definește o valoare între un minim și un maxim: font-size: clamp(1rem, 2vw, 2rem)
min() / max() - aleg valoarea cea mai mică / mare

🔧 Exemplu live - Funcții moderne CSS

<div class="responsive-box">Text scalabil</div>

.responsive-box {
  background: #f39c12;
  color: white;
  padding: 20px;
  font-size: clamp(1rem, 2vw, 2rem);
  width: calc(100% - 40px);
  margin: 20px auto;
  text-align: center;
  border-radius: 6px;
}

3. Tematizare și întreținere ușoară

Cu variabile, poți schimba tema unui site dintr-un singur loc. Poți chiar să le suprascrii în funcție de media queries sau moduri (dark/light).

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

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #f5f5f5;
  }
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

Exemplu - Toggle temă cu variabile CSS

Acest exemplu folosește variabile CSS pentru a defini culorile temei și un buton care comută între modul light și dark. Totul e controlat printr-o clasă pe <body>.

🔧 Toggle temă - Light/Dark cu variabile CSS

<button id="toggleTheme">Comută tema</button>
<div class="theme-box">Tema se schimbă dinamic</div>

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --accent: #3498db;
}

:root.dark-theme {
  --bg-color: #121212;
  --text-color: #f5f5f5;
  --accent: #9b59b6;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s ease, color 0.3s ease;
  font-family: sans-serif;
  padding: 20px;
}

button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  cursor: pointer;
}

.theme-box {
  background: var(--accent);
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 6px;
}

document.getElementById("toggleTheme").addEventListener("click", function() {
  document.documentElement.classList.toggle("dark-theme");
});

Best practices

Definește variabilele în `:root`

Astfel devin accesibile global în tot documentul.

:root {
  --primary-color: #3498db;
  --font-size-base: 1rem;
}

Folosește `clamp()` pentru scalabilitate

Ideal pentru fonturi și spacing responsive.

font-size: clamp(1rem, 2vw, 1.5rem);

Folosește `calc()` pentru layout flexibil

Combină unități pentru dimensiuni dinamice.

width: calc(100% - 40px);

Folosește `min()` și `max()` pentru control predictiv

Limitează dimensiuni în funcție de viewport.

width: min(100%, 600px);

Grupează variabilele pe categorii

Organizează-le pentru întreținere ușoară.

:root {
  /* Culori */
  --color-bg: #fff;
  --color-text: #333;

  /* Spacing */
  --space-sm: 8px;
  --space-md: 16px;

  /* Fonturi */
  --font-base: 1rem;
}

Folosește fallback în `var()`

Asigură-te că ai o valoare de rezervă.

color: var(--text-color, #000);

Tematizează cu clase sau media queries

Schimbă tema cu o clasă globală sau detectează automat.

:root.dark {
  --color-bg: #121212;
  --color-text: #f5f5f5;
}

Documentează variabilele

Adaugă comentarii clare pentru fiecare grup.

:root {
  /* Culori principale ale temei */
  --primary: #3498db;
}

Când variabilele CSS sunt bine structurate și funcțiile moderne sunt folosite inteligent, stilurile devin nu doar elegante, ci și scalabile, întreținute ușor și pregătite pentru orice provocare de design.

🧠 Quiz - Variabile CSS și funcții moderne

Layout-uri fără Flex/Grid ➔

Variabile CSS și funcții moderne

1. Variabile CSS (--nume)

2. Funcții moderne: calc(), clamp(), min(), max()