Memahami Inheritance pada CSS II
Keuntungan utama dari Inheritance yang dimiliki oleh CSS adalah dapat mengurangi pengulangan perintah dan efektifitas file size, pada artikel lalu kita telah mengetahui hakikat dari inheritance melalui contoh tree view pada tag HTML. Artikel ini akan mengajak kita memahami kegunaan dasar inheritance CSS dan pengaplikasiannya.
Perhatikan kode CSS berikut ini:
.container {
font-family: Arial, Verdana, Helvetica;
font-size: 12px;
font-weight: bold;
color: #000;
}
.boxkanan {}
font-family: Arial, Verdana Helvetica;
font-size: 12px;
font-weight: normal;
color: #FFF;
Dimana kedua kode diatas di aplikasikan pada tag:
<div class="container "><div class="boxkanan"> Teks dalam Kotak </div></div>
Bila Inheritance kita pergunakan, maka penulisan CSS dapat kita persingkat menjadi:
.container {
font-family: Arial, Verdana, Helvetica;
font-size: 12px;
font-weight: bold;
color: #000;
}
.boxkanan {}
font-weight: normal;
color: #FFF;
.container merupakan parent dari .boxkanan, maka bila terdapat properti dari .boxkanan yang sama parentnya sebaiknya tidak usah ditulis karena secara otomatis tag yang berada di bawah hirarki tag lain yang didefinisikan akan memiliki sifat yang sama. Dalam hal ini, font-family: Arial, Verdana, Helvetica; font-size: 12px; yang telah dimiliki .container secara otomatis telah dimiliki pula oleh .boxkanan.
Inheritance berlaku tidak hanya pada tag yang memiliki class atau ID tetapi berlaku pula pada tag HTML yang tidak memiliki class atau ID. Hal ini merupakan keuntungan lain yang dapat kita manfaatkan. Tag HTML diatas dapat kita singkat menjadi:
<div class="container "><div>Teks dalam Kotak </div></div>
dan pada CSS dapat kita tulis:
.container {
font-family: Arial, Verdana, Helvetica;
font-size: 12px;
font-weight: bold;
color: #000;
}
.container div{
font-weight: normal;
color: #FFF;
}
Bila mana terdapat tag lain didalam tag HTML diatas seperti:
<div class="container "><div>Teks dalam Kotak <span>Background</span> <p>Teks lainnya</p> </div></div>
Kita tidak usah mendefinisikan setiap tag baru dengan memberi pengenal seperti ID atau Class, cukup parentnya saja. Sekali lagi, yang Anda perlukan hanya mengedit CSS nya.
.container {
font-family: Arial, Verdana, Helvetica;
font-size: 12px;
font-weight: bold;
color: #000;
}
.container div{}
font-weight: normal;
color: #FFF;
.container div span {
background: #efefef;
}
.container div span p {
font-size: 10px;
font-weight: normal;
}
Efisiensi dapat kita lakukan bila kita menggunakan inheritance pada CSS dengan baik. (Pupung Budi Purnama)
udah di coba, tapi kok gak ngaruh yah…:-/
Memang nggak akan ngaruh
ini kan metode/pemahaman supaya kita dapat menulis CSS dengan lebih efektif. Jadi tidak akan pengaruh secara visual, tapi nantinya akan berpengaruh pada filesize dan struktur CSS yang dibuat.