Hobi mengutak-atik template? Suka membuat desain sendiri? Jangan sebut diri anda sebagai web desainer bila tidak mengerti apa itu CSS . Syarat utama untuk bisa membuat template atau themes adalah mengerti apa itu CSS (saya tidak bilang harus hafal semua selector nya ya). Selector dalam CSS akan dinyatakan dengan istilah ID (tanda "#" - tanpa tanda kutip) dan Class (tanda titik "."). Seringkali terjadi kesalahkaprahan dalam penggunaaanya. Hal ini biasa terjadi pada pemula (seperti saya dulu waktu baru belajar CSS )
So sebelum melangkah lebih jauh dan menulis kode CSS yang tidak perlu, sangat penting untuk mengetahui apa itu ID dan apa itu Class di CSS.


beda antara ID dan Class

Pada penggunaan ID, tidak boleh ada 2 ID yang sama dalam suatu halaman hasil render oleh browser atau user agent. Kenapa? Logika sederhananya (baca lagi diatas), bagaimana mungkin seorang siswa dengan ID yang spesifik dapat hadir di 2 tempat atau lebih dalam waktu yang bersamaan. (tidak bahas soal imaginative movie ya :D) dan sebaliknya untuk Class sendiri, dapat digunakan berulang kali tanpa masalah. Karena sifat Class yang global.

Kapan menggunakan ID dan kapan menggunakan Class dalam CSS selector?

Gunakan ID untuk kondisi spesifik, dan gunakan Class untuk kondisi yang dapat digunakan berulang.

lihat contoh dibawah ini:

Penggunaan ID untuk topmenu akan dimaksudkan bahwa kondisi ID topmenu adalah spesifik untuk menu bar diatas dan untuk menu di bawah menggunakan ID footermenu.

Tata nama Selector:

Saya rasa penjelasan beda ID dan Class di CSS selector sudah cukup jelas ya, jadi dilanjut dengan bagaimana penamaan ID dan Class itu sendiri.

Penamaan atau Tata Nama selector di CSS boleh dikata dapat dilakukan semaunya, dalam artian suka-suka sang desainer layout :D
Dan akan jauh lebih baik bila tata nama selector ID dan atau Class itu menggunakan kondisi yang spesifik dan mempermudah pada saat debugging daripada sekedar asal tempel nama.

Misal:
penamaan selector "topmenu" akan menunjukkan bahwa selector tersebut merujuk pada posisi top (atas) dan menu (bagian menu), akan lebih baik daripada "get menu".Dengan kata lain, penamaan yang tepat dan merujuk pada lokasi penempatan dalam suatu layout akan jauh mempermudah dalam melakukan debugging atau perubahan tidak hanya pada sisi layout tapi juga dari sisi lainnya, misal gonta-ganti warna atau pemasangan image.

Sampai disini kiranya sudah cukup dulu. Mohon maaf bila penjelasan di tips ini kurang begitu jelas