Variabile CSS (Custom Properties) Ghid Rapid

In this tutorial, you'll learn about Variabile CSS (Custom Properties) Ghid Rapid. We cover key concepts, practical examples, and best practices.

Vei învăța cum să definești și să folosești variabile CSS (custom properties) pentru a crea teme dinamice, cod mai curat și întreținere simplificată.

Problema

Repetarea aceleiași valori (culori, dimensiuni, spațieri) în multiple locuri din CSS face întreținerea greoaie. O singură modificare necesită căutarea și înlocuirea manuală în zeci de reguli. Variabilele CSS rezolvă această problemă permițând definirea centralizată și reutilizarea valorilor.

Rezolvare rapidă

Pasul 1: Definește variabilele în :root

/* Greșit — valori hardcodate peste tot */
.button { background: #3498db; }
.alert { border-color: #3498db; }

/* Corect — variabile globale */
:root {
    --primary: #3498db;
    --primary-hover: #2980b9;
    --spacing-md: 16px;
    --radius: 8px;
}

Rezultat: Valorile sunt centralizate și ușor de modificat.

Pasul 2: Folosește var() pentru a referi variabilele

.button {
    /* Greșit — valoarea directă */
    background: #3498db;
    /* Corect — referință la variabilă */
    background: var(--primary);
    padding: var(--spacing-md);
    border-radius: var(--radius);
}

.button:hover {
    background: var(--primary-hover);
}

Rezultat: O singură modificare în :root actualizează toate butoanele.

Pasul 3: Oferă fallback-uri în var()

.element {
    /* Greșit — fără fallback, riscă să fie invalid */
    color: var(--undefined-var);
    /* Corect — cu fallback */
    color: var(--undefined-var, #333);
    /* Fallback complex */
    background: var(--card-bg, var(--surface, #fff));
}

Rezultat: Dacă variabila lipsește, valoarea de rezervă este folosită.

Pasul 4: Moștenirea și suprascrierea variabilelor

:root {
    --text-color: #333;
}

.card {
    --text-color: #555; /* suprascrie doar în .card */
    color: var(--text-color);
}

.card.highlight {
    --text-color: #222; /* suprascrie și mai specific */
    background: #ffd;
}

Rezultat: Variabilele se comportă ca orice proprietate CSS — se moștenesc și se suprascriu pe bază de specificitate.

Pasul 5: Teme dinamice cu variabile

[data-theme="dark"] {
    --bg: #1a1a2e;
    --text: #e0e0e0;
    --primary: #bb86fc;
}

body {
    background: var(--bg, #fff);
    color: var(--text, #333);
}

Rezultat: Schimbarea atributului data-theme pe body comută instant între teme, fără CSS suplimentar.

Prevenire

• Definește variabilele globale în :root
• Folosește fallback-uri în toate apelurile var() din producție
• Denumește variabilele semantic (--color-primary, --spacing-lg)
• Folosește DevTools pentru a inspecta valorile variabilelor

Greșeli comune

1. Confundarea variabilelor CSS cu variabilele Sass/SCSS — Variabilele CSS (--var) sunt live și pot fi modificate din JavaScript; variabilele Sass sunt compilate static.
2. Omisiunea fallback-ului — Dacă variabila lipsește și nu există fallback, proprietatea devine initial, posibil diferit de comportamentul așteptat.
3. Variabile în media queries — @media nu acceptă var(). Trebuie să hardcodezi breakpoint-urile.
4. Definirea variabilelor în domeniu prea îngust — Variabilele definite într-un selector nu sunt accesibile în afara acestuia.
5. Valori invalide pentru proprietatea vizată — var(--x: 10px) pe color duce la comportament imprevizibil.

Exercițiu

Creează un sistem de teme cu 3 variante (light, dark, high-contrast) folosind variabile CSS și atributul data-theme. Include cel puțin 5 proprietăți diferite (bg, text, primary, secondary, border).

Întrebări frecvente

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu CSS și HTML pentru productivitate și securitate sporită.