<div id="example-value">hoặc <div id="example_value">?
Trang web này và Twitter sử dụng kiểu đầu tiên. Facebook và Vimeo - thứ hai.
Bạn sử dụng cái nào và tại sao?
Câu trả lời:
Sử dụng Dấu gạch nối để đảm bảo sự tách biệt giữa HTML và JavaScript của bạn.
Tại sao? xem bên dưới.
Dấu gạch nối hợp lệ để sử dụng trong CSS và HTML nhưng không hợp lệ cho các Đối tượng JavaScript.
Rất nhiều trình duyệt đăng ký HTML Id là đối tượng toàn cục trên đối tượng window / document, trong các dự án lớn, điều này có thể trở thành một vấn đề thực sự.
Vì lý do này, tôi sử dụng tên có Dấu gạch nối theo cách này, các id HTML sẽ không bao giờ xung đột với JavaScript của tôi.
Hãy xem xét những điều sau:
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>Nếu trình duyệt đăng ký id HTML dưới dạng đối tượng toàn cục, điều trên sẽ không thành công vì thông báo không phải là 'không xác định' và nó sẽ cố gắng tạo một phiên bản của đối tượng HTML. Bằng cách đảm bảo một id HTML có dấu gạch ngang trong tên sẽ ngăn chặn các xung đột như bên dưới:
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>Tất nhiên, bạn có thể sử dụng messageText hoặc message_text nhưng điều này không giải quyết được vấn đề và bạn có thể gặp phải vấn đề tương tự sau đó khi bạn vô tình truy cập vào một Đối tượng HTML thay vì một JavaScript
Một lưu ý, bạn vẫn có thể truy cập các đối tượng HTML thông qua đối tượng window (ví dụ) bằng cách sử dụng window ['message-text'];
window['message-text'];
Tôi muốn giới thiệu Hướng dẫn tạo kiểu HTML / CSS của Google
Nó nói rõ :
Phân tách các từ trong ID và tên lớp bằng dấu gạch ngang . Không được nối các từ và chữ viết tắt trong bộ chọn bằng bất kỳ ký tự nào (không bao gồm ký tự nào) ngoài dấu gạch nối, để cải thiện sự hiểu biết và khả năng quét.
/* 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 {}BEMký hiệu?
Nó thực sự tùy thuộc vào sở thích, nhưng thứ sẽ khiến bạn bị ảnh hưởng theo một hướng cụ thể có thể là trình soạn thảo mà bạn viết mã. Ví dụ: tính năng tự động hoàn thành của TextMate dừng lại ở dấu gạch ngang, nhưng xem các từ được phân tách bằng dấu gạch dưới là một từ duy nhất. Vì vậy, tên và id của lớp the_posthoạt động tốt hơn so với the-postkhi sử dụng tính năng tự động hoàn thành ( Esc).
Tôi tin rằng điều này hoàn toàn phụ thuộc vào lập trình viên. Bạn cũng có thể sử dụng camelCase nếu muốn (nhưng tôi nghĩ điều đó trông rất khó xử.)
Cá nhân tôi thích dấu gạch nối hơn, vì nó gõ nhanh hơn trên bàn phím của tôi. Vì vậy, tôi muốn nói rằng bạn nên chọn những gì bạn cảm thấy thoải mái nhất, vì cả hai ví dụ của bạn đều được sử dụng rộng rãi.
Một trong hai ví dụ là hoàn toàn hợp lệ, bạn thậm chí có thể đưa vào hỗn hợp ":" hoặc "." làm dải phân cách theo thông số kỹ thuật w3c . Cá nhân tôi sử dụng "_" nếu nó là một tên hai từ chỉ vì sự giống nhau về không gian của nó.
ZZ:ZZsẽ phải có mã là ZZ\00003AZZ(CSS2 trở lên).
Trên thực tế, một số framework bên ngoài (javascript, php) gặp khó khăn (lỗi?) Với việc sử dụng dấu gạch ngang trong tên id. Tôi sử dụng gạch dưới (960grid cũng vậy) và tất cả đều hoạt động tốt.
Tôi sẽ đề xuất gạch dưới chủ yếu vì lý do tác dụng phụ của javascript mà tôi đang gặp phải.
Nếu bạn nhập mã bên dưới vào thanh vị trí của mình, bạn sẽ gặp lỗi: 'example-value' không được xác định. Nếu div được đặt tên với dấu gạch dưới, nó sẽ hoạt động.
javascript:alert(example-value.currentStyle.hasLayout);document.getElementById("example-value"), mà sẽ hoạt động tốt.