Menggabungkan Class atau ID

Penggabungan beberapa properties baik itu id atau class merupakan salah satu cara untuk menekan filesize dan pengefektifan deklarasi agar tidak terjadi perulangan yang terlalu banyak.

Contoh dibawah ini adalah penggabungan antara id dan class walaupun kedua elemen tidak berhubungan secara langsung. Sebelumnya, mohon maaf kalau contoh yang saya tulis adalah versi singkat.

 

Andaikata kita mempunyai 2 class dan sebuah id seperti dibawah:

.div_kiri {width:300px; padding:10px; border: 1px solid #EEE; background-color:#F44F23}
.div_kanan {width:480px; padding 10px; border: 1px solid #EEE; background-color:#F44F23;
font-size: 85%}
#judul {width:340px; padding 10px; border: 1px solid #EEE; background-color:#F44F23}

 

Kalau kita perhatikan, antara class div_kiri ,div_kanan dan #judul hanya mempunyai perbedaan width dan font-size. Jadi, kedua class ini bisa saja digabung menjadi:

.div_kiri, div_kanan{padding 10px; border: 1px solid #EEE; background-color:#F44F23}
.div_kiri{width:300px}
.div_kanan{widht:480px; font-size: 85%}
#judul {width:340px}

 

Lebih irit bukan? Trik ini biasanya dipakai desainer untuk mengurangi file-size dari suatu css yang tujuannya meningkatkan performa kecepatan web. Contoh diatas adalah contoh sederhana saja. Terkadang kita menemukan banyak properties yang sama dan berulang-ulang.