Menulis CSS dengan lebih efisien

Written by Fikri Rasyid

Ada banyak sekali tutorial mengena cara menulis CSS dengan lebih efisien. Mulai dari Writing Efficient CSS for use in The Mozilla UI dari mozilla developer center, Effeciently Rendering CSS hingga Modern CSS Layouts: The Essential Characteristics dan The Principle of Cross Browser CSS Coding-nya Smashing Magazine. Berdasarkan banyak tutorial yang saya baca, saya mengikuti panduan-panduan ini dalam menulis CSS:

  1. Reset atau “setting” default CSS-nya – Setiap browser memiliki default value sendiri untuk setiap elemen. Membiarkannya berbeda-beda akan sangat memakan waktu penulisan CSS.
  2. Gunakan indentation dalam penulisan CSS sehingga mudah terbaca
  3. Pisahkan setiap area CSS dengan tag comment. Misalnya dengan tag comment seperti /*----------- Header -------- */
  4. Gunakan CSS Shorthand! – a life saver!
  5. atribut id lebih efisien daripada class – tapi tidak berarti semuanya harus ditulis menggunakan atribut id karena hal tersebut akan sangat tidak efisien dan sulit dikelola. Jangan berlebihan mengorbankan semantik untuk efisiensi.
  6. Gunakan selector secara efisien. Baca artikel efficiently rendering CSS oleh CSS-Tricks yang sudah saya cantumkan diatas
  7. Urutkan selector secara berurutan. Versi saya: /* Reset */ lalu /*Main Structure */ lalu /* Header */ dan demikian seterusnya dari atas kebawah dan dari selector yang paling sering digunakan (karena muncul di halaman utama dan halaman-halaman lainnya) ke selector yang hanya sesekali digunakan
  8. Saya lebih memilih menulis selector dan style-nya dalam satu baris daripada memisahkan tiap style dalam baris berbeda.
  9. Meng-grup-kan selector yang memiliki style yang sama.
  10. Pertimbangkan mengenai cross-browser compatibility. Tidak semua selector dan style berjalan di semua browser.

Khusus mengenai poin terakhir yakni, menangani browser compatibility, saya menerapkan pendekatan seperti ini:

  1. Desain dengan acuan pertama Mozilla Firefox. Alasannya? Firefox cukup web standard dan sangat populer. Penggunaannya luas.
  2. Jika di Firefox sudah oke, biasanya tampilannya di browser berbasis webkit (Safari & Chrome) akan relatif sama – kecuali markup anda tidak valid atau anda menggunakan style CSS3 yang browser-specific.
  3. Jika di ketiga browser diatas sudah oke, seharusnya di Opera juga relatif oke. Seandainya di Safari, Chrome dan Opera terdapat perbedaan, kemungkinannya adalah ada style yang secara fundamental kurang tepat. Solusinya, rubah lagi dasar CSS-nya atau gunakan CSS hack. Well, penggunaan CSS hack untuk mentarget browser modern sangat tidak dianjurkan sih.
  4. Jika di browser modern sudah oke, saatnya mengurusi tampilan di browser yang kurang modern tapi sialnya cukup populer. Tampilan di IE8 umumnya tidak banyak masalah. Namun jika terdapat masalah, gunakan file css terpisah yang ditargetkan untuk IE8 kebawah. Panduan lengkapnya ada di How To Create an IE-Only Stylesheet oleh Chris Coyier.
  5. setelah IE8, benahi tampilan di IE7 lalu IE6. Gunakan teknik “lower than”-IE Only Stylesheet yang terdapat di tutorial CSS-Tricks yang saya cantumkan di poin ke 4.

That’s it. Ada yang memiliki tips lain? Feel free to share through comment :)

About The Author

Fikri Rasyid - I speak HTML + CSS + jQuery, breath in world wide WordPress-land, co-founded WPNest and currently pursuing my bachelor degree majoring English Education at Indonesia University of Education. Google my name for more information about me.

Connect & Subscribe

Keep in touch and get my latest content trough:

Categories

Post Info

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>