Perbedaan 'id' dan 'class' di dalam 'div'

Class ada untuk penggunaan style dalam CSS. Untuk itulah tujuan mereka diciptakan. Itu sebabnya mereka tidak bersifat 'unique', anda dapat menggunakan class yang sama seperti banyak element yang anda ingin terapkan 'style' nya. Sementara orang-orang telah mulai menggunakan class selama beberapa tahun ini untuk men target element dengan javascript, itu bukan tujuan sebenarnya mengapa kita memiliki class.



Jika anda biasa menargetkan element dalam CSS menggunakan ID itu hanya merupakan efek kesenangan semata. ID ada untuk menargetkan unique element dalam HTML, JS dan CSS. Cara anda dapat memanfaatkan itu adalah sebagai berikut:

1) "hash"- Jika misalnya anda memiliki ini:

<div id="top">

Anda dapat menyebutnya dengan hash seperti ini:

<a href="#top">Go to Top</a>

Sehingga pada dasarnya DIV #top melakukan fungsi yang sama yang digunakan orang untuk membuang kode <a name="top"></a>. Untuk alasan ini saya ingin membuat semua bagian utama unique page section saya dinyatakan dengan ID.

2) Atribut LABEL "FOR".

Jika anda membuuat label dalam form:
<label for="loginUsername">UserName:</label>

dan anda memasukkan input ini:
<input type="text" name="login[username]" id="loginUsername" />

Itu akan membentuk hubungan semantik dan aksesibilitas antara label dan input, contoh yang jika anda klik pada label, itu akan fokus pada input yang terkait... Jika input adalah checkbox, mengklik pada label akan berefek check/uncheck the box, menciptakan area selection yang lebih besar.

3) Javascript targeting

element.getElementById -- ada di awal mula Javascript, dan tetap begitu sebagai landasan sebagaimana banyak script yang bekerja. Sementara itu, Javascript telah menambahkan getElementsByClassName sebagai pilihan, dan orang2 telah mengkodekan code yang sama versi mereka sendiri selama 10 tahunan, bukan itu tujuan 'class' dibuat.

Satu lagi, bahwa anda juga bisa menggunakan ID sebagai CSS selector semata2 hanya sebagai efek 'kesenangan'. Fakta yg menyedihkan lagi, banyak developer tidak mengerti kegunaan dua ID yang telah disebutkan.

Pada dasarnya, anda dapat melakukan lebih banyak dengan id, tetapi sebagai orang lain mengatakan mereka unik, hanya ada sekali pada halaman. Class dapat digunakan berulang-ulang, tapi tidak memiliki fungsi sebanyak berpikir 'out of the box'.

Satu nasihat lagi pada Class - hindarilah menggunakan Class "cuma untuk..." atau untuk mengharuskan apply presentation; dalam CSS kita memiliki hal ini disebut "inheritance", gunakan ini. Anda akan sering melihat markup yang idiot seperti:

Code:

<div id="mainMenu">
    <ul class="menuUL">
        <li class="menuLI"><a href="/" class="menuA">Home</a></li>
        <li class="menuLI"><a href="/links" class="menuA">Links</a></li>
        <li class="menuLI"><a href="/forums" class="menuA">Forums</a></li>
        <li class="menuLI"><a href="/contact" class="menuA">Contact Us</a></li>
    </ul>
</div>

Mengapa saya menyebutnya omong kosong yang bodoh? Jika anda punya ID atau class pada container terluar, dan SETIAP tag didalamnya mendapatkan class yang persis sama, TIDAK SATUPUN dari mereka membutuhkan class!!! Satu lagi, UL adalah sebuah block level container yang sempurna, jadi kenapa ada ekstra "DIV tidak berguna" -- 99% kemungkinan anda melihat code seperti itu, seharusnya tidak lebih dari seperti ini:

Code (text):
<ul id="mainMenu">
    <li><a href="/">Home</a></li>
    <li><a href="/links">Links</a></li>
    <li><a href="/forums">Forums</a></li>
    <li><a href="/contact">Contact Us</a></li>
</ul>