Dalam web design, tentu kita sudah tidak asing dengan istilah CSS. ya.., CSS singkatan dari Cascading Style Sheets yaitu dokumen yang digunakan untuk mengatur tampilan suatu halaman yang ditulis dalam bahasa markup (Wikipedia Indonesia -red). Nah, dalam tulisan ini saya akan membahas sedikit tentang bagaimana membuat dokumen CSS agar hasilnya bisa lebih optimal (terhadap desain secara keseluruhan), yaitu CSS yang elegan (mudah dibaca / dimengerti, proses render lebih cepat dan tingkat kompatibilitasnya tinggi).

Setidaknya ada 6 (enam) hal yang akan saya bahas di sini, diantaranya adalah :

Pertama : Lakukan Reset Style
Reset style berfungsi untuk menghilangkan format style standar (khususnya padding dan margin)  yang dibawa oleh browser. Hal ini penting, karena setiap browser memiliki style yang berbeda, maka untuk menjaga kompatibilitas web kita perlu dilakukan reset style.

Untuk melakukannya dapat menggunakan YUI Reset, atau kita buat manual seperti ini :

1
2

/* Reset */
body, table, h1, h2, h3, blockquote {margin: 0; padding: 0;}

Hindari melakukan reset keseluruhan, karena proses rendering akan menjadi lebih lama. Lakukan reset style yang diperlukan saja.
Hindari reset seperti ini :

1
2

/* Reset */
* {margin: 0; padding: 0;}

Kedua : Kelompokkan Style
Pengelompokan style yang saya maksud di sini adalah pengelompokan style menurut suatu standar yang akan dipakai. Contoh saya akan mengelompokkannya menurut bagian-bagian dalam dokumen nanti, maka saya membaginya menjadi : general, header, wrap, footer, dsb.

Contohnya :

1
2
3
4
5
6
7
8
9
10
11
12

/* General */
h1, h2, h3 {color: red; font-family: verdana, arial, roman}
table {border: 1px solid #111111}
 
/* Header */
#header {background: transparent url('images/header.jpg') repeat-x; width: auto;}
 
/* wrap */
#wrap {background: #f9f9f9 url('images/wrap.jpg') repeat-x; width: auto;}
 
/* Footer */
#footer {background: #000 url('images/footer.jpg') no-repeat; width: auto; }

Ketiga : Buat Alpabetis
Buatlah setiap properti dalam dokumen CSS alpabetis, hal ini akan memudahkan kita untuk membaca ulang style yang telah dibuat.

Penulisan tidak alpabetis :

1
2
3
4
5
6

#header {
margin : 12px 10px 13px 9px;
background-color : #dedede;
width : 900px;
height : 600px;  
}

Penulisan yang alpabetis :

1
2
3
4
5
6

#header {
background-color : #dedede;
height : 600px;  
margin : 12px 10px 13px 9px;
width : 900px;
}

Keempat : Pisahkan Dokumen
Pisahkan CSS ke dalam beberapa dokumen/file jika style yang kita buat sudah sangat ‘bejibun‘, sehingga akan sulit untuk dibaca ulang nantinya. Contoh kita pisahkan antara pengaturan box model dengan pengaturan typography, jadi kita buat 2 (dua) file CSS, yaitu file box.css dan typography.css, naah nanti kita tinggal melakukan importing ke salah satu file CSS tadi.

1
2

/* Import file typography.css */
@import ('typography.css')

Kelima : Penulisan Harus Konsisten
Setidaknya ada 3 (tiga) cara untuk menjadikan style kita penulisannya konsisten.

1. Buat semua properti kedalam satu baris

   1	#footer {background: #000 url('images/footer.jpg') no-repeat; width: auto; }

2. Buat semua properti kedalam banyak baris

   1 2 3 4

   #footer { background: #000 url('images/footer.jpg') no-repeat; width: auto; }

3. Apabila style kurang dari 3 (tiga) properti jadikan satu baris, jika style lebih dari 3 (tiga) properti jadikan banyak garis.

   1 2 3 4 5 6 7 8

   #footer {background: #000 url('images/footer.jpg') no-repeat; width: auto; }   #footer-text { background: #000; width: 50%; color: #dddddd; padding: 10px; }

Silahkan mau pilih yang mana ?

Keenam : Jangan Dulu Mulai!!
Lho kok, jangan dulu mulai?, jadi kapan dong dikerjainnya?? hehehe..

Maksud saya, bukan melarang memulai menuliskan style kedalam sebuah file .css, tetapi akan lebih efektif jika kita memulai dengan membuat dulu file markup (html, xhtml, dsb), apabila markup sudah 100%, maka tinggal dibuatkan stylenya. Cara ini akan membantu efisiensi penulisan kode, agar tidak ada style yang tidak terpakai dan tidak pula harus bolak-balik antara markup dan style.

Mudah-mudahan bermanfaat, keep design!

Hormat Saya,