Beda ID dan Class dalam CSS, penting buat pemula

28
Aug
2010

Beda ID dan Class dalam CSS, penting buat pemula

Last Updated :: Saturday, 28 August 2010 14:27 by Riesurya@MOTW

Hobi mengutak-atik template? Suka membuat desain sendiri? Jangan sebut diri anda sebagai web desainer bila tidak mengerti apa itu CSS :P. 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 :P)
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.

Secara mudahnya beda antara ID dan Class adalah sebagai berikut:

ID: bersifat spesifik
Class : bersifat global
lebih detailnya begini,

Umpamakan anda menjadi salah seorang siswa dalam suatu sekolah (apa aja, boleh Sekolah Dasar, SMP atau SMU dst dst, kalo saya sih gak pernah jadi siswa SMU :(, tapi SMA 😛

Seorang siswa akan memiliki identitas spesifik yang pastinya tidak akan sama dengan siswa-siswa lainnya, seberapa banyaknya siswa dalam suatu sekolah. Kondisi ini disebut sebagai ID.

Sementara itu kondisi Class adalah seperti suatu kelas dalam suatu sekolah, dimana dapat terdiri dari sejumlah siswa, dengan kata lain, Class tidak memiliki spesifisitas seperti halnya ID.
Konsep ID dan Class ini secara global akan sering ditemui bila anda belajar lebih lanjut tentang apa itu OOP, Object Oriented Programming – dan kali ini saya tidak akan membahas apa itu OOP 😀

Sampai disini mudah-mudahan jelas ya.
OK lanjut ke

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:
CSS selector different
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 😀
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, so bila ada yang ingin dipertanyakan silakan salurkan di kotak komentar dibawah ini. 

Sampai jumpa pada sesi artikel seputar CSS lainnya.

Advertisements

About debbyya

i'm not an ordinary girl yeah i've done to go to USA i hope we can share some information over here View all posts by debbyya

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: