Penulisan skrip CSS sering kali diabaikan. Akibatnya pada aplikasi web yang cukup kompleks kita bakal kerepotan sendiri dibuatnya untuk melihat skript2x panjang CSS..

Beberapa teknik dibawah ini mungkin dapat diterapkan berkaitan dengan pemangkasan line-code di skrip kita ,

1. Kalo class-nya memiliki nilai attribute dan properties yang sama… mending di Group aja !

.klas1{
background-color: white;
border: 1px solid #959596;
text-align: left;
}
.klas3{
background-color: white;
border: 1px solid #959596;
text-align: left;
}

Mending di tulis jadi :

.klas1, .klas3{
background-color: white;
border: 1px solid #959596;
text-align: left;
}

2. Pengaturan posisi pada 1 line

.klas1{
padding-top:30px;
padding-right: 10px;
padding-bottom:30px;
padding-left:10px;
}

klas2{
padding-top:10px;
padding-right: 10px;
padding-bottom: 0 ;
padding-left:50px;
}

Bisa juga dibuat kek gini

.klas1{
padding : 30px 10px ;
}
.klas2{
padding: 10px 10px 0 50px
}

pengaturan urutannya berdasarkan : atas-kanan-bawah-kiri

3. Style background 1 line

.klas1{
background-color : #FF00FF;
background-image: url(images/img.jpg);
background-repeat: repeat;
background-position: top;
}

Bisa dijadiin satu baris seperti ini:

.klas1{
background : #FF00FF url(’images/img.jpg’) no-repeat top;
}

4. Style Border 1 line

p
{
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
border-top-color: #0000FF;
border-right-color: #0000FF;
border-bottom-color: #0000FF;
border-left-color: #0000FF;
}

Dipersingkat menjadi :

p
{
border-top: medium solid #ff0000
}

5. penulisan singkat kode warna hexa

p{
background-color : #FFFFFF;
}

dapat ditulis juga seperti ini :

p{
background-color : #FFF;
}