<div id="example-value">atau <div id="example_value">?
Situs dan Twitter ini menggunakan gaya pertama. Facebook dan Vimeo - yang kedua.
Mana yang Anda gunakan dan mengapa?
Jawaban:
Gunakan Tanda Hubung untuk memastikan isolasi antara HTML dan JavaScript Anda.
Mengapa? Lihat di bawah.
Tanda hubung valid untuk digunakan di CSS dan HTML, tetapi tidak untuk Objek JavaScript.
Banyak browser mendaftarkan ID HTML sebagai objek global pada objek jendela / dokumen, dalam proyek-proyek besar, ini bisa sangat merepotkan.
Untuk alasan ini, saya menggunakan nama dengan tanda hubung sehingga ID HTML tidak akan pernah konflik dengan JavaScript saya.
Pertimbangkan hal berikut:
message.js
message = function(containerObject){
this.htmlObject = containerObject;
};
message.prototype.write = function(text){
this.htmlObject.innerHTML+=text;
};html
<body>
<span id='message'></span>
</body>
<script>
var objectContainer = {};
if(typeof message == 'undefined'){
var asyncScript = document.createElement('script');
asyncScript.onload = function(){
objectContainer.messageClass = new message(document.getElementById('message'));
objectContainer.messageClass.write('loaded');
}
asyncScript.src = 'message.js';
document.appendChild(asyncScript);
}else{
objectContainer.messageClass = new message(document.getElementById('message'));
objectContainer.messageClass.write('loaded');
}
</script>Jika browser mendaftarkan id HTML sebagai objek global, hal di atas akan gagal karena pesannya tidak 'tidak ditentukan' dan akan mencoba membuat instance dari objek HTML. Dengan memastikan ID HTML memiliki tanda hubung pada namanya mencegah konflik seperti di bawah ini:
message.js
message = function(containerObject){
this.htmlObject = containerObject;
};
message.prototype.write = function(text){
this.htmlObject.innerHTML+=text;
};html
<body>
<span id='message-text'></span>
</body>
<script>
var objectContainer = {};
if(typeof message == 'undefined'){
var asyncScript = document.createElement('script');
asyncScript.onload = function(){
objectContainer.messageClass = new message(document.getElementById('message-text'));
objectContainer.messageClass.write('loaded');
}
asyncScript.src = 'message.js';
document.appendChild(asyncScript);
}else{
objectContainer.messageClass = new message(document.getElementById('message-text'));
objectContainer.messageClass.write('loaded');
}
</script>Tentu saja, Anda dapat menggunakan messageText atau message_text tetapi ini tidak menyelesaikan masalah dan Anda dapat mengalami masalah yang sama nanti di mana Anda secara tidak sengaja mengakses Objek HTML dan bukan JavaScript.
Satu komentar, Anda masih dapat mengakses objek HTML melalui (misalnya) objek jendela dengan menggunakan window ['message-text'];
window['message-text'];
Saya akan merekomendasikan Panduan Gaya HTML / CSS Google
Ini secara khusus menyatakan :
Pisahkan kata dalam ID dan nama kelas dengan tanda hubung . Jangan gabungkan kata dan singkatan di pemilih dengan karakter apa pun (termasuk tidak ada sama sekali) selain tanda hubung, untuk meningkatkan pemahaman dan kemudahan pemindaian.
/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}
/* Not recommended: uses underscore instead of hyphen */
.error_status {}
/* Recommended */
#video-id {}
.ads-sample {}BEMnotasi?
Itu benar-benar tergantung pada preferensi, tetapi apa yang akan mempengaruhi Anda ke arah tertentu mungkin editor yang Anda kodekan. Misalnya, fitur pelengkapan otomatis TextMate berhenti di tanda hubung, tetapi melihat kata-kata yang dipisahkan oleh garis bawah sebagai satu kata. Jadi nama kelas dan id dengan the_postberfungsi lebih baik daripada the-postsaat menggunakan fitur pelengkapan otomatis ( Esc).
Saya yakin ini sepenuhnya terserah programmer. Anda bisa menggunakan CamelCase juga jika Anda mau (tapi menurut saya itu akan terlihat canggung.)
Saya pribadi lebih suka tanda hubung, karena lebih cepat mengetik di keyboard saya. Jadi saya akan mengatakan bahwa Anda harus memilih apa yang menurut Anda paling nyaman, karena kedua contoh Anda digunakan secara luas.
Salah satu contoh benar-benar valid, Anda bahkan dapat memasukkan ":" atau "." sebagai pemisah menurut spesifikasi w3c . Saya pribadi menggunakan "_" jika itu adalah nama dua kata hanya karena kemiripannya dengan spasi.
ZZ:ZZharus di-escape sebagai ZZ\00003AZZ(CSS2 dan di atasnya).
Sebenarnya beberapa framework eksternal (javascript, php) mengalami kesulitan (bug?) Dengan menggunakan tanda hubung pada nama id. Saya menggunakan garis bawah (begitu juga 960grid) dan semuanya bekerja dengan baik.
Saya akan menyarankan garis bawah terutama untuk alasan efek samping javascript yang saya hadapi.
Jika Anda mengetik kode di bawah ini ke bilah lokasi, Anda akan mendapatkan pesan kesalahan: 'nilai-contoh' tidak ditentukan. Jika div diberi nama dengan garis bawah, itu akan berhasil.
javascript:alert(example-value.currentStyle.hasLayout);document.getElementById("example-value"), yang akan bekerja dengan baik.