Saat pertama kali menggunakan CSS menuliskan kodenya memang akan terasa melelahkan dan sangat rumit jika anda sebelumnya terbiasa membuat website hanya dengan table. Bagaimanapun juga setelah kita mengetahui bahwa pembuatan website dengan table bukanlah standar web yang baik dan sangat kuno, kita pun pasti akan mulai beralih dan mempelajari CSS.
Semua orang pasti bisa menuliskan CSS, bahkan sekarang banyak sekali perusahaan yang bergerak di bidang converting PSD ke HTML dengan CSS. tapi satu hal yang jadi pertanyaan apakah CSS yang dituliskan cukup baik? di sini akan bahas hal-hal tentang menuliskan CSS yang baik di artikel kali ini.
Memberikan indentasi (jarak) setiap menuliskan Properti CSS
1
2
3
4
5
6
7
8
9
10
| body { background: url(../images/background.jpg); font: 80%/160% Arial, Helvetica, sans-serif; height:auto; left:0; margin:0 auto; padding:0; top:0; width:100%;} |
Berilah jarak indentasi saat menuliskan properti CSS, pisahkan antara properti CSS yang satu dengan yang lainya bila memang propertinya banyak. Pemberian jarak akan membuat kode CSS terorganisasi dengan baik sehingga mudah untuk menemukan properti yang kita cari. Bayangkan bila menuliskan CSS seperti sebuah paragraph cerita pendek dan memiliki 500 baris kode tentu mata kita akan tegang dan pusing saat menelusuri kode
Disusun secara alphabetical
Penyusunan tulisan properti CSS secara alphabetical juga adalah cara yang baik dan mempermudah pencarian properti yang mau kita rubah nilainya. seperti contoh CSS di atas properti dimulai dari huruf awal b (background) dan diakhiri dengan huruf awal w (width). pada Dreamweaver fasilitas ini sudah disediakan dengan menekan ctrl dan spasi.
Penulisan kode CSS secara singkat
anda harus belajar bagaimana menuliskan kode CSS secara pendek. Pada penulisan properti border di bawah ini adalah contoh penulisan yang kurang baik:
1
2
3
4
5
6
7
8
9
10
11
| .sample { border-color:#000; border-style:solid; border-width:1px;}.sample2 { border-bottom:1px #000 solid; border-left:1px #000 solid; border-right:1px #000 solid; border-top:1px #000 solid;} |
1
2
3
| .sample, .sample2 { border:1px #000 solid;} |
Menggunakan CSS reset
1
2
3
4
5
6
7
8
9
10
11
12
| html, body { height:100%; min-height:100%;}body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, blockquote, form, fieldset, input, textarea, th, td { margin:0; padding:0;}table { border-collapse:collapse; border-spacing:0;} |
Setiap browser mempunyai kompatibilitas yang berbeda dan juga perlakuan berbeda pada CSS, anda harus mereset semua CSS sebelum memulai penulisan CSS sehingga kode anda tidak terpengaruhi browser dan browser menampilkan item CSS anda dengan benar, Di atas adalah beberapa contoh mereset CSS pada beberapa elemen. anda bisa membuatnya sendiri atau silahkan download CSS reset sini
Lakukan CSS dengan benar
Anda tidak boleh membuat file CSS sebelum anda selesai melakukan markup terhadap HTML anda. Buatlah dulu keseluruhan markup di HTML mulai dari kepala sampai kaki. CSS tidak bernilai sama sekali tanpa format Dokumen HTML yang baik
Membuat pernyataan Comments
1
2
3
4
5
6
7
8
9
| /*membuat layout*/.layout { }/*membuat sidebar*/.sidebar{} |
membuat comment di setiap bagian pengerjaan adalah hal yang baik untuk membuat penulisan kita tetap bersih dan terorganisir dengan baik. ini juga membantu anda untuk mempermudah penelusuran kode
Tulis CSS secara terstruktur
sepertihalnya menggambar manusia anda akan menggambar kepalanya dahulu sebelum menggambar kaki, begitu juga dalam menuliskan kode sebaiknya anda mulai dari kepala HTML (header) terstruktur hingga bagian kaki (Footer). Penulisan kode secara tidak terstruktur akan memusingkan anda sendiri
Hapus semua Kode CSS yang tidak terpakai
Mungkin saat menuliskan kode banyak atribut Class dan ID yang tidak jadi dipakai, buanglah segera semua atribut class dan ID yang tidak terpakai atau pisahkan dalam file referensi yang berbeda. Apabila anda belakangan ingin merubah CSS anda, anda tidak akan di pusingkan dengan banyaknya atribut class dan ID yang sudah tidak digunakan.
Pisahkan penulisan CSS hacking
Untuk membuat browser tertentu menampilkan item CSS yang kita buat secara benar, kita akan melakukan hacking CSS untuk browser tersebut. ini merupakan kegiatan rutin dalam menuliskan kode CSS. Pisahkan penulisannya dengan file css, tuliskan secara inline style sheet karena penulisan hacking akan di anggap tidak valid oleh browser
Gunakan Bahasa Inggris dalam menulikan Kode
Bahasa inggris adalah bahasa internasional bagaimanapun juga anda harus menguasainya dan belajar untuk menuliskan berbagai kode css dalam bahasa inggris. Terlepas dari tema CSS anda juga harus membiasakan menuliskan codinf dalam bahasa inggris baik untuk document (HTML, XML, XHTML, dsb) atau Programming (PHP, JAVA, dll).
Anda tidak tahu nasib anda 5-10 tahun kedepan, Mungkin saja anda akan bekerjasama dengan perusahaan asing atau pekerjaan anda akan di kembangkan oleh pihak asing yang tidak mengerti bahasa Indonesia, jiga terbiasa dengan menuliskan kode dalam bahasa Indonesia maka tentunya anda akan kesulitan untuk menuliskan kode dengan bahasa inggris. Maka dari itu mulailah dari sekarang!
Siapkan rokok yang banyak (jangan diikutin)
Bila anda seorang perokok siapakan persediaan rokok yang banyak karena saat coding tingkat merokok anda menjadi lebih banyak dan bila hobby coding anda suka lupa waktu. Bayangkan bila tengah malam rokok anda habis terus gak ada warung yang buka wah bisa tambah pusing codingnya.... Wakakakaka.
Konsistensi Penulisan CSS
Terlepas dari berbagi tips, hal yang paling penting adalah anda harus konsisten dengan gaya penulisan anda. Setiap orang mempunyai pandangan sendiri lakukanlah apa yang menurut anda paling baik untuk anda lakukan.