Uvod u CSS varijable

Zvonimir Dimovski CSS, CSS varijable
Uvod u CSS varijable

CSS predprocesori (Sass , Less itd...) danas su jedan od glavnih alata koji frontend developeri koriste kako bi bolje organizirali svoj kod, osigurali bolju kompatibilnost kroz razne verzije/inačice browsera i skratili vrijeme razvoja korisničkih sučelja kroz ugrađenu modularnost.

Vrlo važan detalj zbog kojeg developeri koriste predprocesore su varijable, kako bi smanjili repetitivnost pri pisanju koda. Primjerice, često se događalo da određena promjena u izgledu aplikacije zahtijeva promjenu na više mjesta za u CSS datoteci za istu stvar.

CSS predprocesori su izvrsni, ali nisu savršeni. Naime, oni stavljaju novu razinu apstrakcije povrh već svima dobro poznatog CSS-a (drukčiji način pisanja koda koji se kompajlira u CSS), što zahtijeva od cijelog tima prilagodbu na novu tehnologiju. Također, neopreznim pisanjem koda (Less/Sass) rezultat nakon procesiranja može biti vrlo ružna i nečitljiva CSS datoteka.

Nakon svega viđenog, otvara se pitanje - možemo li dobiti jednaku funkcionalnost bez mana samo s nativnim CSS-om? Jednostavan odgovor: NE, ali (uvijek taj „ali“), W3 je predstavio CSS varijable koje u jednom važnom segmentu mogu supstituirati CSS predprocesore.

Jednostavan primjer korištenja CSS varijabli u nativnom CSS-u

:root {
  --base-font-size: 15px;
  --brand-color: #6495ed;
}
p {
  font-size: var( --base-font-size );
}
a {
  font-size: var( --base-font-size );
  color: var(--brand-color);
}
.header {
  color: var(--brand-color);

.footer {
  background-color: var(--brand-color);

Osnovni pojmovi

U gore navedenom primjeru možemo uočiti tri nove komponente koje ne susrećemo često u CSS-u:

1. :root pseudoklasa
2. var() funkcija
3. prilagođena svojstva (custom properties)

:root pseudo klasa

Naša prilagođena svojstva (custom properties) možemo koristiti bilo gdje, odnosno unutar bilo kojeg elementa, ali dobra praksa nalaže da ih definiramo na jednom centralnom mjestu. :root pseudoklasa reprezentira najvišu razinu u HTML dokumentu i zbog toga je najbolje mjesto za smještaj „custom propertyja“.

var() funkcija

Kako bismo primijenili naše „custom propertyje“ na elementima moramo koristiti var() funkciju, inače ih browseri neće shvatiti i neće se prikazati ono što želimo postići.

Prilagođena svojstva (custom properties)

Frontend developeri i dizajneri dobro znaju za standardna CSS svojstva poput color, width, margin, background-color itd... koja su već ugrađeni dio CSS-a. 

Prilagođena svojstva (custom properties) su ona kojima smo mi kao developeri odredili naziv koji nam odgovara za naš slučaj. Kako bismo ih mogli koristiti po standardu, moramo stavljati prefiks „--„ (u primjeru: --base-font-size, --brand-color)

Prednosti korištenja CSS varijabli

1. Mogućnosti korištenja bez CSS predprocesora (Less, Sass itd.).

2. Brži development zbog „reuseanja“ koda.

3. Mogućnost boljeg održavanja – u svakoj web aplikaciji ponekad je potrebno prilagođavati vizualni aspekt aplikacije novim zahtjevima korisnika ili novim trendovima. Iako je riječ o možda naizgled minimalnoj promjeni (npr. korištenje drukčije nijanse boje na svim elementima koji koriste tu boju), takva izmjena za sobom može povući izmjene na desecima/stotinama različitih mjesta unutar CSS datoteke ako je riječ o standardnom CSS-u bez korištenja varijabli. Korištenjem varijabli takva bi se izmjena napravila na samo jednome mjestu.

4. Mogućnost brzih ad-hoc izmjena.

5. Mogućnost pristupa i manipulacije s JavaScriptom.

6. Mogućnosti definiranja varijabli unutar bilo kojeg selektora kako bi se postavila ili premostila trenutačna vrijednost tog selektora.

Nedostaci korištenja CSS varijabli

1. Browser support

Uz sve te prednosti CSS varijabli, frontend developeri i dalje će nastaviti koristiti CSS predprocesore (barem još neko vrijeme) zbog ostalih pogodnosti koje CSS predprocesori nude – poput kompajliranja u standardni CSS bez bojazni o kompatibilnosti browsera, modularnosti i zbog činjenice da je manje koda = brži development.

Kao i svi developeri, nadam se približavanju mogućnosti nativnog CSS-a mogućnostima predprocesora, a CSS varijable znatna su promjena u tom smjeru.