Trendek jönnek, trendek mennek, de a css nem megy sehova – a Lépcsőzetes stíluslapok (mert az a polgári neve) használata kikerülhetetlen, ha egy kicsit komolyabban is gondoljuk, hogy saját designt szeretnénk megjeleníteni egy honlapon, és nem elégszünk meg a WordPress sablonok gyári beállításaival. Még olyan, a begépelős kódolástól nagyon távol álló rendszerekben, mint a Divi is akad mód, hogy a saját egyéni css kódunkkal kiigazítsuk a weboldalak fazonját. Lényeg a lényeg: a css ismerete elengedhetetlen.

Szerencsére mindig akad valami újdonság, amivel pofásabbá, látványosabbá, vagy csak egyszerűen áramvonalasabbá tehetjük a kódunkat. Mivel a css nem központilag, nagy főverziókban frissül, hanem a apránként, kvázi javaslatként  vezeti be a W3 Consortium az újításokat (amiket aztán a böngészők kell, hogy használhatóvá tegyenek), kicsit komplikáltabb kérdés, hogy az egyszeri webdesigner mikor kezdheti el használni az egyes újdonságokat. Az általános szabály, hogy érdemes kivárni pár évet, de jó barátunk a Can I Use? című weboldal, ahol elég részletes választ kaphatunk az ilyen jellegű kérdéseinkre.

Az egyik ilyen remek fejlesztés, ami mostanra már lényegében minden böngészőben (95%) a rendelkezésünkre áll, a css változók használata. 

Ahogy a neve is mondja, ez a fogás annyiból áll, hogy a kódunk különböző szintjein meghatározhatunk egy-egy változót, azaz nevet adhatunk egy értéknek, és a továbbiakban már elég csak ezzel a névvel hivatkozni rá. Ez a megoldás egyrészt lecsökkentheti a gépelési és keresgélési időt, mondjuk a színkódok használatakor, de ami még fontosabb, hogy rugalmasabbá, módosíthatóbbá teszi a kódunkat. Micsoda fejfájás lehet, ha ki kell cserélnünk egy színt az egész designban – jöhet a find&replace, meg a reménykedés, hogy nem siklottunk el valami felett. Lényegesen egyszerűbb, ha csak a változó meghatározásánál kell átírni pl. a --primary_color, --secondary_color színét, és máris rendben vagyunk. További előnye, hogy jóval átláthatóbbá teszi a kódot, hiszen a design szempontjából fontos elemek érthető szavak formájában jelennek meg.

Hogyan használjuk? 

A változókat két helyen is definiálhatjuk: egyrészt a kód elejére elhelyezhetjük őket egy :root osztály alá, ebben az esetben valódi, globálisan érvényes változókat kapunk. 

:root{ 
  --my-custom-color: green;
}

Definiálhatjuk azonban őket a különböző osztályokon belül is, ilyenkor, mint minden css tulajdonság, a változó arra az osztályra és az alárendelt elemekre lesz érvényes.

.page-header--compact {
    --padding-start: 1.5rem;
    --padding-block: 1rem;
}

Formailag a változó nevét — előzi meg, a név szóközt nem tartalmazhat, és figyeljünk rá, hogy megkülönbözteti a kis- és nagybetűket.  Érdemes alaposan meggondolni, minek nevezed el a változóidat: egyrészt itt is alapszabály, hogy gondolj arra, hogy esetleg más is bele kell, hogy egyszer nyúljon a művedbe, a legbiztosabb, ha angol nevet adsz a “gyerekeidnek”. A másik dolog, amire érdemes felkészülni, az értékek változtathatósága, pl. ha a fehár hátteret --white névre kereszteled, kicsit hülyén érzed majd magad, ha be kell vezetned egy sötét módot, és átállítod a --white értékét sötétszürkére.   

Használatkor a var()funkciót kell használnunk, a zárójelbe a változó neve kerül, ez a kódba elhelyezve a változó által képviselt értéket helyettesíti, bármi is legyen az. 

A legtöbb magyarázatban (ahogy nálam is) a színsémák példáján keresztül mutatják be a változók működését, mint pl. a W3Schools szócikke is:

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Ha 100%-ra biztonságos kódot akarsz írni, elhelyezhetsz fallback, azaz tartalék értékeket is a változók mellé. (Bár ezzel éppen, hogy többet kell gépelned…)

color: var(--primary-color, #222);

A helyzet persze az, hogy a színek állítgatásánál sokkal szélesebb körben használhatóak a változók. Ahmad Shadeed egy remek, hosszú cikkben rengeteg izgalmas példát hoz fel a használatukra, Ziga Petek példakódjában pedig egy reszponzív layoutot vázol fel úgy, hogy a töréspont alatt csak a változókat definiálja újra.

A változók használata kifejezetten kreatív feladat, éppen ezért érdemes nem csak eltanulni néhány jó fogást a nagyoktól, de a kódod és a design megtervezésekor mindig elgondolkodni rajta, nem lehet-e vajon egy változó bevezetésével elegánsabbá, átláthatóbbá tenni a végeredményt.