Memberi nama atribut HTML "class" dan "id" - tanda hubung vs. garis bawah [tertutup]

113

<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?

html coding-style naming-conventions Emanuil Rusev
sumber
11
Kedua tautan tersebut sekarang rusak
Steve

Jawaban:

135

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'];

Raatje
sumber
Saya tidak mengerti sesuatu tentang posting Anda di sini, mungkin Anda bisa mengklarifikasi. Jadi, Anda mengatakan bahwa beberapa browser mendaftarkan id html sebagai objek global dan jika Anda meletakkan tanda hubung di id maka Anda akan menjamin bahwa tidak akan ada konflik antara objek yang dibuat secara otomatis dan yang Anda buat karena tanda hubung tidak diperbolehkan . Tapi bagaimana browser membuat objek dengan tanda hubung ini jika tanda hubung tidak diperbolehkan? sepertinya harus menghapusnya, sehingga meninggalkan Anda dengan potensi konflik penamaan.
Dallas Caley
@DallasCaley jika Anda tidak melihat, jawaban ini adalah pembaruan yang memanggilwindow['message-text'];
Chris Marisic
Ah saya pikir saya mengerti. Aneh bahwa javascript tidak mengizinkan Anda untuk membuat objek dengan tanda hubung pada nama sebagai objek yang berdiri sendiri, tetapi ini akan memungkinkan Anda untuk membuat objek dengan tanda hubung pada nama jika dibuat sebagai properti dari objek lain yang tidak memiliki tanda hubung di nama.
Dallas Caley
Posting ini sebenarnya membuat saya memikirkan kembali posisi saya menjadi hampir 100% setuju dengan Anda dari posisi tidak yang konyol, satu-satunya reservasi saya diberikan posisi Anda pada masalah ini tampaknya jelas bahwa setiap id harus memiliki - di dalamnya untuk mencegah masalah yang sama kecuali Anda secara khusus menginginkannya berfungsi untuk beberapa id tertentu.
pengguna254694
87

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 {}
Klas Mellbourn
sumber
1
Bagaimana dengan BEMnotasi?
Iulian Onofrei
1
@IulianOnofrei Anda tentu saja bebas menggunakan BEM, tetapi jelas tidak sepenuhnya mematuhi Panduan Gaya Google.
Klas Mellbourn
hmm, sangat aneh. Kerangka GWT dari google menggunakan camelcase. Periksa baris kode ini <h1 id = "appTitle"> </h1> di dokumen berikut. gwtproject.org/doc/latest/tutorial/i18n.html
karlihnos
4
Google! = Otomatis benar. Sering kali memang demikian, tetapi menjadi Google saja tidak cukup sebagai pembenaran.
Craig Brett
2
Ini ide yang sangat buruk. Cepat atau lambat Anda akan ingin menggunakan nama Anda dalam bahasa pemrograman yang tidak mendukung tanda hubung dalam nama variabel (pada dasarnya semuanya), dan kemudian BOOM! Aturan penggantian nama yang konyol.
Timmmm
5

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).

Doug Neiner
sumber
Anda benar tetapi akan tampak jauh lebih berantakan di sekitar "hutan html"
Kamil Tomšík
4

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.

adamse
sumber
3
pertanyaan ini serupa dan memverifikasi jawaban ini stackoverflow.com/questions/70579/…
Matt Smith
2

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.

Myles
sumber
14
Ya, Anda dapat menggunakan titik dua dan titik untuk Id, tapi itu cara yang baik untuk membuat orang yang menulis file CSS membenci Anda.
Dave Markle
5
Pengenal HTML ZZ:ZZharus di-escape sebagai ZZ\00003AZZ(CSS2 dan di atasnya).
McDowell
1
Saya tidak mengatakan itu adalah latihan yang baik, saya mengatakan itu valid.
Myles
5
Kedengarannya seperti cara yang menyenangkan untuk membuat jQuery meledak
Mike Robinson
0

Saya menggunakan yang pertama (satu-dua) karena lebih mudah dibaca. Untuk gambar meskipun saya lebih suka garis bawah (btn_more.png). Camel Case (oneTwo) adalah pilihan lain.

eozzy
sumber
0

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.

DavidHavl
sumber
3
Yang mana Bagaimanapun, keterbacaan kode jauh lebih penting.
Kamil Tomšík
-1

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);
jgreep
sumber
5
Seharusnya begitu document.getElementById("example-value"), yang akan bekerja dengan baik.
Chuck
Saya mendapatkan masalah yang sama dengan ASP.NET MVC ketika menentukan nilai untuk atribut di parameter HtmlAttributes dari fungsi pembantu Html.
Matthijs Wessels