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}