Mempersingkat deklarasi CSS

Demi menghemat file-size, mempersingkat deklarasi properties bisa jadi pilihan. Contohnya seperti berikut:

.title {
border-top-color:#000000;
border-top-width:1px;
border-top-style:solid;
border-bottom-color:#000000;
border-bottom-width:1px;
border-bottom-style:solid;
border-right-color:#000000;
border-right-width:1px;
border-right-style:solid;
border-left-color:#000000;
border-left-width:1px;
border-left-style:solid;
}

class diatas adalah contoh properties versi panjang. Bisa ditulis seperti ini:

.title{ border: 1px solid #000000}

Penjelasannya: 1px adalah width, solid adalah style, dan #000000 adalah warna. Hal yang perlu diperhatikan dalam mempersingkat deklarasi adalah urutan penempatan properties.

Contoh untuk font:

.hurufmerah {font-size: 85%; color: #CC0000;font-weight: bold}

menjadi:

.hurufmerah{font: 85% bold #CC0000}

 

Contoh untuk border yang berbeda:

.kotak {border-top: 1px solid #FFF; border-left: 2px solid #FFF;
border-right: 5px solid #FFF; border-bottom: 3px solid #FFF}

menjadi:

.kotak{border: solid #FFF; border-width: 1px 5px 3px 2px}

perhatikan urutan border width. Border-top diletakkan pertamakali, selanjutnya mengikuti searah jarum jam (atas, kanan, bawah, kiri)

Contoh background:

.kotakmerah{background-color:#FF9900;
background-image{url(../image/template/header/bg_submenu.gif);
background-repeat:repeat-x;background-position:bottom}

menjadi:

.kotakmerah{background: #FF9900
url(../image/template/header/bg_submenu.gif) bottom repeat-x}

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.