Inheritance

Tidak semua properti CSS harus dideklarasikan pada setiap elemen. Sebagian nilai mengalir otomatis dari elemen induk ke elemen anaknya melalui mekanisme yang disebut inheritance atau pewarisan. Topik ini memilah properti yang diwariskan dan yang tidak, membahas nilai kata kunci inherit, initial, unset, dan revert, serta manfaat menaruh properti turunan pada elemen induk.

Properti yang diwariskan#

Properti yang berkaitan dengan penyajian teks umumnya diwariskan. Contoh yang paling sering dimanfaatkan adalah color, font-family, font-size, dan line-height, ditambah text-align serta list-style. Ketika properti ini tidak dideklarasikan pada sebuah elemen, elemen tersebut menggunakan nilai hasil perhitungan elemen induknya.

Tiga deklarasi berikut pada body sudah cukup untuk mengatur tampilan teks seluruh halaman:

body {
  font-family: sans-serif;
  line-height: 1.6;
  color: #1e293b;
}

Setiap elemen di dalam body, mulai dari paragraf, tabel, hingga tombol, mewarisi ketiga nilai tersebut tanpa satu deklarasi pun ditulis ulang. Pewarisan berlaku berjenjang. Elemen yang menyatakan color sendiri menggunakan nilainya sendiri, sedangkan elemen di dalam elemen itu kembali mewarisi nilai baru tersebut.

Pewarisan menjaga teks tetap konsisten, tetapi juga berarti perubahan pada induk menjalar ke seluruh keturunannya. Perubahan line-height pada body, misalnya, mengubah jarak baris pada setiap teks yang tidak menyatakan nilai sendiri. Dua sisi itulah yang menjadikan penempatan deklarasi sebuah keputusan, bukan kebetulan.

Properti yang tidak diwariskan#

Properti yang mengatur kotak dan tata letak tidak diwariskan, di antaranya margin, padding, border, background, width, dan height. Alasannya dapat dilihat dari akibatnya. Apabila border diwariskan, setiap anak dari elemen bergaris menerima garis yang sama pula, dan satu kartu akan menghasilkan belasan kotak bergaris. Browser memilih perilaku yang lebih berguna, yaitu kotak setiap elemen ditentukan oleh deklarasinya sendiri.

Deklarasi border pada .kartu berikut hanya mengelilingi kotak kartu itu saja:

.kartu {
  border: 1px solid #cbd5e1;
  padding: 16px;
}

Elemen di dalam kartu, misalnya judul dan daftar, tetap tanpa garis meskipun berada persis di dalamnya. Apabila garis memang diinginkan pada anaknya, deklarasi ditulis pada anak tersebut, atau nilai inherit digunakan secara eksplisit sebagaimana dijelaskan pada bagian berikutnya. Pembagian perilaku ini memiliki pola yang mudah diingat, yaitu properti teks cenderung diwariskan, sedangkan properti kotak tidak.

Nilai inherit, initial, unset, dan revert#

Empat kata kunci dapat digunakan pada hampir semua properti untuk mengendalikan pewarisan secara eksplisit. Nilai inherit memaksa properti mengambil nilai induk, termasuk untuk properti yang secara normal tidak diwariskan. Nilai initial mengembalikan properti ke nilai awal yang ditetapkan spesifikasi. Nilai unset mengikuti sifat propertinya, yaitu berperilaku seperti inherit untuk properti yang diwariskan dan seperti initial untuk yang tidak. Nilai revert memutar gaya kembali ke asal sebelumnya, yaitu ke gaya bawaan browser apabila tidak ada gaya lain yang menaunginya.

Contoh berikut menggunakan tiga dari keempat kata kunci tersebut:

a {
  color: inherit;     /* warna tautan mengikuti teks di sekitarnya */
}

.kotak-baru {
  padding: unset;     /* sama dengan initial, kembali ke 0 */
}

.kutipan {
  font-style: revert; /* kembali ke gaya bawaan browser */
}

Kata kunci inherit paling sering berguna untuk properti yang tidak diwariskan, misalnya menyetel background-color: inherit agar kotak mengikuti latar induknya. Nilai unset dan revert paling berguna saat menggulung balik gaya, misalnya pada komponen yang perlu kembali ke perilaku dasar browser. Keempatnya mengabaikan deklarasi lain pada selector yang sama, sehingga penempatannya perlu diperhitungkan.

Menaruh properti turunan pada elemen induk#

Deklarasi properti yang diwariskan semakin hemat apabila letaknya semakin tinggi. Menaruh font-family, line-height, dan color pada body atau pada pembungkus komponen menghilangkan banyak deklarasi yang berulang. Nilai khusus tetap dapat diberikan pada elemen tertentu, dan sisanya mengalir otomatis.

Contoh berikut menaruh nilai dasar teks pada komponen kartu, lalu hanya menyatakan penyimpangannya:

.kartu-profil {
  font-family: sans-serif;
  line-height: 1.5;
  color: #1e293b;
}

.kartu-profil .peran {
  color: #64748b;
  font-size: 14px;
}

Selector .peran hanya menyatakan dua nilai yang berbeda dari dasarnya, sedangkan nilai teks lainnya mengikuti .kartu-profil. Pola ini menjaga perubahan tema tetap murah, karena mengganti line-height pada komponen cukup dilakukan di satu tempat. Pada proyek yang besar, kebiasaan ini menghasilkan stylesheet yang jauh lebih pendek dan lebih mudah dipelajari.

Penempatan yang terlalu tinggi juga membawa risiko. Nilai yang ditaruh pada body memengaruhi semua komponen, termasuk yang sebenarnya membutuhkan nilai berbeda. Praktik yang seimbang menaruh nilai dasar pada pembungkus komponen, bukan hanya pada body, sehingga komponen tetap dapat dipindahkan keluar tanpa membawa asumsi halamannya.

Kesalahan umum#

Kesalahan pertama adalah mengira border ikut mewarisi ke elemen anak. Deklarasi pada induk hanya mengelilingi kotak induk itu saja, sehingga anak yang seharusnya bergaris tetap polos. Apabila setiap anak memang perlu garis, deklarasikan pada anak, atau gunakan selector yang menargetkan anak.

Kesalahan kedua adalah menyebarkan font-size pada banyak elemen sekaligus. Penyesuaian skala huruf kemudian menuntut penyuntingan di banyak tempat dan mudah terlewat pada salah satunya. Deklarasi dasar sebaiknya ditaruh pada induk, dan elemen tertentu hanya menyatakan nilai yang berbeda.

Kesalahan ketiga adalah menggunakan initial dengan harapan kembali ke gaya bawaan browser. Nilai awal spesifikasi dan gaya bawaan browser dapat berbeda, misalnya display: initial menghasilkan inline, sedangkan elemen div secara bawaan berupa block. Untuk memutar ke gaya bawaan browser, gunakan revert.

Ringkasan#

• Properti teks seperti color, font-family, dan line-height diwariskan ke elemen anak, sedangkan properti kotak seperti margin, padding, dan border tidak.
• Kata kunci inherit, initial, unset, dan revert mengendalikan pewarisan secara eksplisit.
• Menaruh properti turunan pada elemen induk memangkas deklarasi berulang dan mempermudah perubahan tema.

Referensi#

• Inheritance — MDN — Penjelasan resmi pewarisan, daftar properti yang diwariskan, dan kata kuncinya.
• unset — MDN — Dokumentasi resmi nilai unset beserta perilakunya menurut sifat properti.
• Learn CSS: Inheritance — web.dev — Modul resmi Google tentang pewarisan dan kata kunci initial, unset, serta revert.