Aturan Penting Menulis File CSS

CSS (Cacading Style Sheet) merupakan bahasa pemrogramman text yang paling mudah dipahami dan di mengerti. Tapi terkadang orang suka seenaknya ketika mengedit CSS di situs atau blognya, lalu suatu saat akan kembali mengeditnya, kita sendiri suka lupa atau pusing dengan susunan baris pada file CSS-nya.

Terlebih lagi ketika di hadapkan dengan file CSS yang sangat kompleks, jika anda tidak melakukan cara yang terstruktur untuk menulis dan mengaturnya.

Posting ini akan membahas tentang cara praktis dan sederhana yang dapat membantu anda menulis file CSS dengan baik dan benar, agar lebih terstruktur dan mudah di pelajari oleh developer lainnya.

1. Urutkan Properti CSS Berdasarkan Abjad

Ketika anda mulai menambahkan properti baru untuk sebuah elemen CSS, mungkin anda tidak pernah memperhatikan urutan yang anda gunakan. Agar lebih baik lagi, gunakan urutan abjad yang terstruktur agar mudah di kembangkan lagi. Lihat contoh di bawah ini:

#wrapper {
border: 1px solid #333;
color: #000;
height: 200px;
padding: 10px;
width: 650px;
}

Dalam beberapa kasus suatu komponen css yang terdapat lebih dari 10 properti, cara ini merupakan trik jitu ketika anda bolak-balik mengedit komponen tersebut.

2. Indent Anak Element Dibawahnya

Elemen id merupakan elemen utama (pada contoh ini #wrapper). Ini merupakan cara terbaik untuk menyorot dependensi antar bagian kode dengan indent yang lebih dalam.

#wrapper {
width: 960px;
}
#wrapper ul {
float: left;
}
#wrapper ul li {
display: block;
}

3. Gunakan Komentar Untuk Memisahkan Komponen Atau Bagian yang Besar

Baris komentar benar-benar berguna ketika memperbaiki kode. Komentar sangat mudah dibaca jika digunakan dengan kriteria tertentu (dan tidak disalahgunakan), dapat membantu anda memisahkan bagian-bagian dari kode CSS yang terkait dengan struktur dokumen HTML, atau bagian-bagian besar seperti header, sidebar, footer. Berikut contohnya:

/*-------------------
HEADER
------------------- */
#header{width:650px;}
#header a:link,
#header a:visited{
color:#0033CC;
}

/*-------------------
NAVIGATION BAR
------------------- */
#nav{width:650px;}
#nav ul li{
float:left;
padding:0 10px;
}

4. Gunakan Spasi Diantara Properti Dan Nilai Yang Tunggal

Cara ini lumayan efektif untuk mengatur kerapihan penulisan, agar mudah dimengerti. Tapi terkadang cara ini sering dilupakan dalam beberapa element saja, dan jarang digunakan dikarenakan keterbatasan waktu untuk mengeditnya.

#main{
width: 650px;
}
#main h1{
color:          #000;
font-size:      22px;
font-weight:    bold;
}
#main p{
color:          #000;
font-size:      12px;
padding:        10px;
}

5. Kelompokkan Elemen Yang Mempunyai Properti Yang Sama

Jika Anda memiliki sekelompok elemen dengan properti dan nilai yang sama, anda dapat mengelompokan mereka dalam properti yang bernilai sama, dan memisahkan properti yang bernilai bedanya. Sebagai contoh lihat kode di bawah ini:

.icon-facebook {
background:url(facebook.gif);
padding-left:  26px;
margin-right:  20px;
width:        100px;
}
.icon-twitter {
background:url(twitter.gif);
padding-left:  26px;
margin-right:  20px;
width:        100px;
}
.icon-delicious {
background:url(delicious.gif);
padding-left:  26px;
margin-right:  20px;
width:        100px;
}

Anda dapat mengimprovisasinya menjadi seperti ini:

.icon-facebook,
.icon-twitter,
.icon-delicious {
padding-left:  26px;
margin-right:  20px;
width:        100px;
}
.icon-facebook{background:url(facebook.gif);}
.icon-twitter{background:url(twitter.gif);}
.icon-delicious{background:url(delicious.gif);}

Kesimpulan

Bila situs anda siap untuk go public, saya sarankan anda untuk membuat dan mempublikasikan file css anda dengan menggunakan versi yang lebih ringan, dengan menggunakan CSS kompresor (seperti http://www.csscompressor.com/ atau http://www.cssoptimiser.com/) Yang memungkinkan anda mengurangi load website agar tidak berat ketika membaca file css.

Jika anda memiliki beberapa pertanyaan atau kendala lainnya dalam membuat file css, silahkan komentar di bawah ini!