TL;DR: Uvedi root paletu, grupe po domeni (boje, spacing, tipografija), koristi fallbacks i mjeri što keširaš.

Zašto uopće varijable?

Bez varijabli, svaki rebrand ili dark mode traži ručno kopanje po stylesheetima. Sa varijablama manipulišeš paletom, spacingom i tipografijom sa jednog mjesta i time čuvaš sate—plus smanjuješ rizik od mikro inkonzistencija.

Postavi jezgro u :root

Drži osnovne konstante u rootu, a teme prebacuj preko body klase. 

:root {
	--accent-rgb: 17, 17, 17;
	--primary-rgb: 255, 255, 255;
	--accent-color: rgb(var(--accent-rgb));
	--primary-color: rgb(var(--primary-rgb));
	--space-1: 0.5rem;
	--space-2: 1rem;
}

body.dark {
	--accent-rgb: 255, 255, 255;
	--primary-rgb: 20, 20, 20;
}

.btn {
	padding: var(--space-1) var(--space-2);
	border-radius: 0.6em;
	background: var(--accent-color);
	color: var(--primary-color);
}

Savjet: grupiši varijable po domeni (color, space, radius, shadow) i drži komentare minimalnim.

Izbjegni anti-pattern

  • Ne dupliraj hex + rgb verzije bez potrebe—drži samo ono što koristiš.
  • Ne hardkodiraj boje u komponentama; samo varijable.
  • Fallback koristi kad interpoliraš: color: rgb(var(--accent-rgb, 17, 17, 17));

Brzi checklist prije produkcije

Lighthouse contrast prolazi za svjetlu i tamnu temu.
Spacing varijable pokrivaju 80% slučajeva bez custom margina.
Komponente nemaju direktne hex vrijednosti.
Teme se mijenjaju samo dodavanjem klase na body.

Primjena u stvarnom životu

Kod dizajnerskih sprintova, varijable smanjuju friction: dizajner pošalje novu paletu, ti promijeniš pet linija u rootu, deployaš i QA već ima konzistentan UI. Za performanse, varijable se keširaju pa su jeftinije od ponovnih inline stilova.

Ukratko: investiraj 30 minuta u setup, uštedi dane na svakom rebrandu.