CSS: Custom Properties, Global & Local Scoping

CSS juga punya variabel, dong~

Nauval
Nauval
Sep 19, 2019 · 4 min read
CSS: Custom Properties, Global & Local Scoping

Hal ini sebenarnya bukan lagi hal baru. Karena sudah ada sekitar 2–3 tahun lalu. Tapi, tidak ada salahnya bila saya tulis lagi dalam kesempatan kali ini.

Variable

Variable, sederhananya, merupakan sesuatu yang reusable atau dapat digunakan kembali tanpa kita perlu menulis ulang sesuatu tersebut. Misal, dalam CSS, kamu memiliki warna utama biru dengan kode HEX: #0000ff . Bila tanpa variable, maka kamu akan menulis kode warna tersebut berulang kali, seperti ini:

body {
background-color: #0000ff;
}
blockquote {
background-color: #fff;
color: #0000ff;
}
...

Contoh di atas hanya pada 2 CSS rules. Kamu bisa bayangkan bila ada banyak CSS rules yang membutuhkan kode warna yang sama, maka kamu akan menulisnya secara berulang.

Lalu masalahnya di mana?

Katakan saja kamu ingin mengganti kode warna tersebut, anggap saja menjadi warna merah dengan kode warna: #ff0000 . Kamu pasti sudah menduganya, kamu akan mengubah kode warna sebelumnya satu per satu.

Maka dari itu variabel datang untuk menyelesaikan masalah seperti ini.

Lalu, bagaimana dengan variable di dalam CSS? Mari kita bahas!

Custom Properties CSS & Global-scoped

CSS memiliki banyak sekali property, masing-masing property memiliki manfaatnya tersendiri, misal, background-color untuk memberi warna latar belakang pada elemen dan berbagai property CSS lainnya.

Umumnya, untuk menggunakan variable, kita perlu mendeklarasikannya terlebih dahulu. Misal di PHP,

$myvar = "Saya adalah nilai variable"; // deklarasikan variableecho $myvar; // memanggil/menggunakan variable

atau di JavaScript,

const myvar = "Saya adalah nilai variable"; // deklarasikan variableconsole.log(myvar); // memanggil/menggunakan variable

lalu, bagaimana dengan CSS?

Pada CSS, untuk mendeklarasikan variable diawali dengan simbol dash 2 kali ditambah keyword. Misal,

--my-var: nilai variable;

sedangkan untuk menggunakannya menggunakan fungsi var(nama-variable) .

Lalu, apakah kode berikut ini valid?

--color-primary: #0000ff;  // deklarasikanbackground-color: --color-primary; // menggunakan

Tidak!

Custom properties pada CSS scopped berdasarkan elemen yang dideklarasikan. Jadi, kode berikut ini tidak valid:

--color-primary: #0000ff;  // deklarasikanbackground-color: --color-primary; // menggunakan

yang benar adalah:

html {
--color-primary: #0000ff; // deklarasikan
}
.element {
background-color: var(--color-primary); // menggunakan
}

Kenapa seperti itu? Karena, di CSS itu harus jelas. Bila kita lihat pada blok kode sebelumnya, custom properties diletakkan secara arbitrary atau sewenang-wenang — tidak berada dalam scope elemen. Sehingga browser akan bertanya, “ini property milik elemen mana?” atau “ini variable untuk elemen mana?”.

Sedangkan, bila kita tulis seperti kode di atas, maka semuanya jelas, custom properties yang kita tulis adalah miliki elemen dengan selector html dan otomatis dapat digunakan semua elemen di bawahnya, karena HTML merupakan selector paling atas atau root.

Saya pribadi lebih suka menulisnya di dalam selector :root . Seperti ini,

:root {
--color-primary: #0000ff; // deklarasikan
}
.element {
background-color: var(--color-primary); // menggunakan
}

CSS :root akan memilih elemen tertinggi dari document. Bila pada HTML elemen tertinggi adalah tag <html> . Jadi, bisa dibilang kode berikut ini sama saja:

:root {
--color-primary: #0000ff;
}
html {
--color-primary: #0000ff;
}

tapi, bila dari sudut pandang specificity atau ketegasan, maka :root akan “menang” dibanding html . Maksudnya? Perhatikan kode berikut,

:root {
--color-primary: #0000ff; // warna biru
}
html {
--color-primary: #ff0000; // warna merah
}
body {
background-color: var(--color-primary); // jadinya warna biru
}

maka warna latar belakang body akan berwarna biru sesuai nilai pada custom properties yang ada di dalam scope :root . Itu yang dimaksud specificity atau ketegasan pada selector CSS. Dalam kata lain, :root lebih diutamakan ketimbang html .

Setiap custom properties yang kamu deklarasikan di elemen yang tinggi urutannya, maka kamu juga dapat menggunakannya di elemen paling bawah urutannya.

Bingung? Kita baru saja melakukannya! Lihat kembali kode blok di atas. :root atau html adalah urutan tertinggi dari document HTML. Sedangkan body merupakan elemen yang urutannya di bawah dari html . Agar lebih mudah lihat urutannya berikut:

<!DOCTYPE html>
<html> <- root
<head> ... </head>
<body> <- child
...
</body>
</html>

Sudah jelas, ‘kan?

Jadi, anggap saja kamu memiliki elemen lain di dalam tag <body> , maka kamu dapat memanggil custom properties yang sudah dideklarasikan di elemen di atasnya — dalam kasus ini dideklarasikan pada :root atau html . Misal,

:root {
--color-primary: #0000ff; // warna biru
}
.my-element { color: var(--color-primary); }.my-another-element { background-color: var(--color-primary); }

Begitu!

Locally-scoped CSS Custom Properties

Kita sudah membahas CSS custom properties sebelumnya dan mendeklarasikannya secara global. Bagaimana kira-kira untuk mendeklarasikan CSS custom properties untuk elemen tertentu saja.

Anggap saja kamu sedang membuat website yang memiliki warna utama biru,

// global
:root {
--color-primary: #0000ff; // warna biru
}

lalu, dalam suatu elemen tertentu warna tersebut diubah menjadi warna merah, anggap saja elemen tersebut adalah div,

// global
:root {
--color-primary: #0000ff; // warna biru
}
body {
background-color: var(--color-primary);
}
div {
--color-primary: #ff0000;
color: var(--color-primary); // --color-primary menjadi merah
}

Itu yang dimaksud dengan mendeklarasikan CSS custom properties secara local.

Itu saja yang saya bahas pada artikel kali ini. Semoga bermanfaat.

Ikuti Instagram @itskodinger untuk mendapatkan update seputar pemrograman atau teknologi lainnya. Jangan lupa kunjungi uarnix.com untuk menonton pelbagai video tutorial dan tentunya gratis.

Nauval

Written by

Nauval

I didn’t master anything. https://nauv.al

More From Medium

Top on Medium

Top on Medium

Apr 5 · 6 min read

14K

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade