Đặt tên cho thuộc tính HTML "lớp" và "id" - dấu gạch ngang và gạch dưới

110

Sử dụng dấu gạch ngang để đảm bảo sự cô lập giữa HTML và JavaScript của bạn.

Tại sao? xem bên dưới.

Dấu gạch ngang là hợp lệ để sử dụng trong CSS và HTML nhưng không hợp lệ cho đối tượng JavaScript.

Rất nhiều trình duyệt đăng ký HTML Id làm đối tượng chung trên đối tượng cửa sổ/tài liệu, trong các dự án lớn, điều này có thể trở thành nỗi đau 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 đây:

thư.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 như các đối tượng toàn cầu trên sẽ thất bại vì tin nhắn không được 'undefined' và nó sẽ cố gắng tạo ra một thể hiện của Đối tượng HTML. Bằng cách đảm bảo một id HTML có một gạch nối trong tên ngăn chặn xung đột như hình dưới đây:

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 sự cố và bạn có thể gặp phải vấn đề tương tự sau này, nơi bạn vô tình truy cập vào một đối tượng HTML thay vì một JavaScript

Một nhận xét, bạn vẫn có thể truy cập các đối tượng HTML thông qua đối tượng cửa sổ (ví dụ) bằng cách sử dụng cửa sổ ['message-text'];

Nguồn

2012-05-02 11:29:19 Raatje

+0

Tôi không hiểu gì về bài đăng của bạn ở đây, có lẽ bạn có thể làm rõ. Vì vậy, bạn nói rằng một số trình duyệt đăng ký id html là đối tượng chung và nếu bạn đặt dấu gạch nối trong id thì bạn sẽ đảm bảo rằng sẽ không có xung đột giữa các đối tượng được tạo tự động này và đối tượng bạn tạo vì dấu gạch nối không được phép . Nhưng làm cách nào để trình duyệt tạo các đối tượng được gạch nối này nếu dấu gạch nối không được phép? có vẻ như nó sẽ phải loại bỏ chúng, do đó để lại cho bạn tiềm năng của một cuộc xung đột đặt tên. –

+0

@DallasCaley nếu bạn không nhìn thấy, câu trả lời này đã được cập nhật gọi ra 'cửa sổ [' tin nhắn văn bản '];' –

+0

Ah tôi nghĩ rằng tôi nhận được nó. Lạ lùng rằng javascript không cho phép bạn tạo một đối tượng có dấu gạch ngang trong tên như một đối tượng độc lập, nhưng nó sẽ cho phép bạn tạo một đối tượng có dấu gạch ngang trong tên nếu nó được tạo như một thuộc tính của đối tượng khác không có dấu gạch ngang trong tên. –

3

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 bạn muốn (nhưng tôi nghĩ điều đó sẽ trông khó xử.)

Cá nhân tôi thích dấu nối, vì gõ nhanh trên bàn phím của tôi. Vì vậy, tôi sẽ nói rằng bạn nên đi với những gì bạn cảm thấy thoải mái nhất, vì cả hai ví dụ của bạn được sử dụng rộng rãi.

Nguồn

2009-11-08 15:33:19 adamse

+2

câu hỏi này là tương tự và xác minh câu trả lời này http://stackoverflow.com/questions/70579/what-is-a-valid-value-for-id-attributes- in-html –

2

Ví dụ là hoàn toàn hợp lệ, thậm chí bạn có thể ném vào hỗn hợp ":" hoặc "." làm dấu phân tách theo w3c spec. Cá nhân tôi sử dụng "_" nếu nó là một tên hai chữ chỉ vì sự giống nhau của nó với không gian.

Nguồn

2009-11-08 15:35:48 Myles

+11

Có, bạn có thể sử dụng dấu hai chấm và dấu chấm cho Id, nhưng đó là cách hay để khiến người đó viết tệp CSS để ghét bạn. –

+5

Mã định danh HTML 'ZZ: ZZ' sẽ phải được thoát là' ZZ \ 00003AZZ' (CSS2 trở lên). – McDowell

+1

Tôi không nói đó là thực hành tốt, tôi đã nói nó hợp lệ. – Myles

0

Tôi sẽ đề xuất gạch dưới chủ yếu vì lý do tác dụng phụ 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: 'ví dụ về giá trị' 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);

Nguồn

2010-01-07 16:35:24 jgreep

+4

Điều đó phải là 'document.getElementById (" ví dụ-giá trị ")', sẽ hoạt động tốt. – Chuck

+0

Tôi nhận được một vấn đề tương tự với ASP.NET MVC khi xác định một giá trị cho một thuộc tính trong tham số HtmlAttributes của các hàm trợ giúp Html. –

0

Tôi sử dụng cái đầu tiên (một hai) vì nó dễ đọc hơn. Đối với hình ảnh mặc dù tôi thích gạch dưới (btn_more.png). Trường hợp Lạc đà (oneTwo) là một tùy chọn khác.

Nguồn

2010-01-07 16:39:50 3zzy

5

Nó thực sự đi xuống theo sở thích, nhưng những gì sẽ ảnh hưởng bạn theo một hướng cụ thể có thể là trình chỉnh sửa bạn mã hóa. Ví dụ: tính năng tự động hoàn tất của TextMate dừng tại dấu gạch nối, nhưng nhìn thấy các từ được phân tách bằng dấu gạch dưới dưới dạng một từ duy nhất. Vì vậy, tên và id của lớp học với the_post hoạt động tốt hơn the-post khi sử dụng tính năng tự động hoàn thành (Esc).

Nguồn

2010-01-07 16:44:07

+0

bạn nói đúng nhưng có vẻ lộn xộn hơn trong "rừng rậm html" xung quanh –

1

Trên thực tế, một số khung bên ngoài (javascript, php) gặp khó khăn (lỗi?) Bằng cách sử dụng hypen trong tên id. Tôi sử dụng gạch dưới (960grid) và tất cả đều hoạt động tốt.

Nguồn

2011-01-24 13:39:51 DavidHavl

+3

Cái nào? Dù sao, khả năng đọc mã là điều quan trọng hơn nhiều. –

70

Tôi muốn giới thiệu các Google HTML/CSS Style Guide

Nó specifically states:

từ riêng biệt trong tên ID và lớp bằng một gạch nối. Không ghép các từ và chữ viết tắt trong các bộ chọn bởi bất kỳ ký tự nào (không bao gồm cả chữ cái) 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 {}

Nguồn

2012-09-20 12:08:44

+0

Còn ký hiệu ['BEM'] (http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax) thì sao? –

+1

@IulianOnofrei bạn hoàn toàn có thể sử dụng BEM, nhưng rõ ràng là không tuân thủ nghiêm ngặt Hướng dẫn kiểu Google. –

+0

hmm, rất lạ. Khung GWT từ google sử dụng camelcase. Kiểm tra dòng mã này

trong docu sau. http://www.gwtproject.org/doc/latest/tutorial/i18n.html – karlihnos

Đặt tên cho thuộc tính HTML "lớp" và "id" - dấu gạch ngang và gạch dưới

Trả lời

Các vấn đề liên quan