Quy ước đặt tên tiêu chuẩn cho id và các lớp html / css là gì?

Có phụ thuộc vào nền tảng bạn đang sử dụng không, hoặc có một quy ước chung mà hầu hết các nhà phát triển đề xuất / tuân theo không?

Có một số lựa chọn:

1. id="someIdentifier"' - trông khá phù hợp với mã javascript.
2. id="some-identifier" - trông giống các thuộc tính giống như html5 và những thứ khác trong html.
3. id="some_identifier" - trông khá phù hợp với mã ruby ​​và vẫn là một định danh hợp lệ bên trong Javascript

Tôi đã nghĩ # 1 và # 3 ở trên có ý nghĩa nhất vì họ chơi đẹp hơn với Javascript.

Có một câu trả lời đúng cho điều này?

Không có cái nào cả.

Tôi sử dụng dấu gạch dưới mọi lúc, do dấu gạch nối làm rối cú pháp tô sáng cú pháp của trình soạn thảo văn bản của tôi (Gedit), nhưng đó là sở thích cá nhân.

Tôi đã thấy tất cả các quy ước được sử dụng ở khắp mọi nơi. Sử dụng cái mà bạn nghĩ là tốt nhất - cái nào đẹp nhất / dễ đọc nhất cho bạn, cũng như dễ gõ nhất vì bạn sẽ sử dụng nó rất nhiều. Ví dụ: nếu bạn đã có phím gạch dưới ở mặt dưới của bàn phím (không chắc, nhưng hoàn toàn có thể), thì hãy nhấn vào dấu gạch nối. Chỉ cần đi với những gì tốt nhất cho chính mình. Ngoài ra, cả 3 quy ước này đều dễ đọc. Nếu bạn đang làm việc trong một nhóm, hãy nhớ tuân thủ quy ước do nhóm chỉ định (nếu có).

Cập nhật 2012

Tôi đã thay đổi cách tôi lập trình theo thời gian. Bây giờ tôi sử dụng trường hợp lạc đà ( thisIsASelector) thay vì dấu gạch ngang bây giờ; Tôi thấy cái sau khá xấu xí. Sử dụng bất cứ thứ gì bạn thích, có thể dễ dàng thay đổi theo thời gian.

Cập nhật 2013

Có vẻ như tôi muốn kết hợp mọi thứ hàng năm ... Sau khi chuyển sang Sublime Text và sử dụng Bootstrap một lúc, tôi đã quay trở lại dấu gạch ngang. Đối với tôi bây giờ chúng trông gọn gàng hơn nhiều so với un_der_scores hoặc camelCase. Cội nguồn của mình vẫn đứng mặc dù: có không phải là một tiêu chuẩn.

Cập nhật 2015

Một trường hợp góc thú vị với các quy ước ở đây là Rust . Tôi thực sự thích ngôn ngữ này, nhưng trình biên dịch sẽ cảnh báo bạn nếu bạn xác định công cụ sử dụng bất cứ thứ gì khác ngoài underscore_case. Bạn có thể tắt cảnh báo, nhưng thật thú vị trình biên dịch gợi ý mạnh mẽ một quy ước theo mặc định. Tôi tưởng tượng trong các dự án lớn hơn, nó dẫn đến mã sạch hơn, điều đó không phải là điều xấu.

Cập nhật 2016 ( bạn đã yêu cầu)

Tôi đã áp dụng tiêu chuẩn BEM cho các dự án của mình trong tương lai. Các tên lớp cuối cùng khá dài dòng, nhưng tôi nghĩ rằng nó mang lại cấu trúc tốt và khả năng sử dụng lại cho các lớp và CSS đi cùng với chúng. Tôi cho rằng BEM thực sự là một tiêu chuẩn (vì vậy tôi có thể notrở thành một người yescó lẽ) nhưng nó vẫn phụ thuộc vào bạn những gì bạn quyết định sử dụng trong một dự án. Quan trọng nhất: phải phù hợp với những gì bạn chọn.

Cập nhật 2019 ( bạn đã yêu cầu)

Sau khi viết không có CSS ​​trong một thời gian, tôi bắt đầu làm việc tại một nơi sử dụng OOCSS trong một trong những sản phẩm của họ. Cá nhân tôi thấy khá khó chịu khi các lớp xả rác ở mọi nơi, nhưng không phải lúc nào cũng phải nhảy giữa HTML và CSS.

Tôi vẫn ổn định trên BEM. Thật dài dòng, nhưng không gian tên làm việc với nó trong các thành phần React rất tự nhiên. Nó cũng tuyệt vời để chọn các yếu tố cụ thể khi kiểm tra trình duyệt.

OOCSS và BEM chỉ là một số tiêu chuẩn CSS hiện có. Chọn một thứ phù hợp với bạn - tất cả đều thỏa hiệp vì CSS không tốt lắm .

Cập nhật 2020

Một bản cập nhật nhàm chán trong năm nay. Tôi vẫn đang sử dụng BEM. Vị trí của tôi đã không thực sự thay đổi từ bản cập nhật 2019 vì những lý do được liệt kê ở trên. Sử dụng những gì phù hợp với bạn, chia tỷ lệ với kích thước nhóm của bạn và ẩn nhiều hoặc ít bộ tính năng kém của CSS như bạn muốn.

Có hướng dẫn về kiểu css & html của google, khuyến nghị luôn luôn sử dụng dấu gạch nối: https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_D006wr .

Tôi khuyên bạn nên sử dụng dấu gạch dưới thay vì dấu gạch nối (-), vì ...

<form name="myForm">
  <input name="myInput" id="my-Id" value="myValue"/>
</form>

<script>
  var x = document.myForm.my-Id.value;
  alert(x);
</script>

bạn có thể truy cập giá trị theo id một cách dễ dàng như thế. Nhưng nếu bạn sử dụng dấu gạch nối, nó sẽ gây ra lỗi cú pháp.

Đây là một mẫu cũ, nhưng nó có thể hoạt động mà không cần jquery - :)

cảm ơn @jean_ralphio, có cách để tránh

var x = document.myForm['my-Id'].value;

Kiểu Dash sẽ là kiểu mã google, nhưng tôi không thực sự thích nó. Tôi thích TitleCase cho id và camelCase cho lớp.

tl; dr;

Không có một câu trả lời đúng. Bạn có thể chọn một trong số nhiều người ngoài đó hoặc tạo tiêu chuẩn của riêng bạn dựa trên những gì hợp lý, tùy thuộc vào người bạn làm việc cùng. Và nó phụ thuộc 100% vào nền tảng.

Bài gốc

Chỉ cần một tiêu chuẩn khác để xem xét:

<div id="id_name" class="class-name"></div>

Và trong kịch bản của bạn:

var variableName = $("#id_name .class-name");

Điều này chỉ sử dụng một camelCase, under_score và hyphen-ation tương ứng cho các biến, id và lớp. Tôi đã đọc về tiêu chuẩn này trên một vài trang web khác nhau. Mặc dù có một chút dư thừa trong bộ chọn css / jquery, nhưng sự dư thừa giúp dễ dàng bắt lỗi hơn. ví dụ: Nếu bạn thấy .unknown_namehoặc #unknownNametrong tệp CSS của mình, bạn biết bạn cần tìm ra điều gì thực sự đề cập đến.

CẬP NHẬT 2019

(Các dấu gạch ngang được gọi là 'kebab-case', dấu gạch dưới được gọi là 'Snake_case', và sau đó bạn có 'TitleCase', 'pascalCase')

Cá nhân tôi không thích dấu gạch nối. Ban đầu tôi đã đăng bài này như một sự thay thế (vì các quy tắc rất đơn giản). Tuy nhiên, Hyphens làm cho các phím tắt lựa chọn rất khó khăn (nhấp đúp chuột, ctrl/ option+ left/ rightvà ctrl/ cmd+ Dtrong vsCode. Ngoài ra, tên lớp và tên tệp là nơi duy nhất mà dấu gạch nối hoạt động, vì chúng hầu như luôn luôn được trích dẫn hoặc trong css, v.v. Nhưng điều tắt vẫn được áp dụng.

Ngoài các biến, tên lớp và id, bạn cũng muốn xem các quy ước tên tệp. Và chi nhánh Git.

Nhóm mã hóa của văn phòng tôi thực sự đã có một cuộc họp một hoặc hai tháng trước để thảo luận về cách chúng ta sẽ đặt tên cho mọi thứ. Đối với các nhánh git, chúng tôi không thể quyết định giữa 321-the_su_description hoặc 321_the-vấn đề-mô tả. (Tôi muốn mô tả 321_theIssue, nhưng đồng nghiệp của tôi không thích điều đó.)

Một ví dụ, để chứng minh làm việc với các tiêu chuẩn của người khác ...

Vue.js không có tiêu chuẩn. Trên thực tế, họ có hai tiêu chuẩn thay thế cho một số mặt hàng của họ. Tôi không thích cả hai phiên bản của họ cho tên tập tin. Họ đề nghị "/path/kebab-case.vue"hoặc "/path/TitleCase.Vue". Cái trước khó đổi tên hơn, trừ khi bạn đặc biệt cố gắng đổi tên một phần của nó. Thứ hai là không tốt cho khả năng tương thích đa nền tảng. Tôi muốn "/path/snake_case.vue". Tuy nhiên, khi làm việc với người khác hoặc các dự án hiện có, điều quan trọng là phải tuân theo bất kỳ tiêu chuẩn nào đã được đặt ra. Vì vậy, tôi đi với trường hợp kebab cho tên tập tin trong Vue, mặc dù tôi sẽ hoàn toàn phàn nàn về nó. Bởi vì không tuân theo điều đó có nghĩa là thay đổi rất nhiều tệp mà vue-cli thiết lập.

Không có quy ước đặt tên cho HTML và CSS. Nhưng bạn có thể cấu trúc danh pháp của mình xung quanh thiết kế đối tượng. Cụ thể hơn những gì tôi gọi là Quyền sở hữu và Mối quan hệ.

Quyền sở hữu

Từ khóa mô tả đối tượng, có thể được phân tách bằng dấu gạch nối.

xe mới rẽ phải

Các từ khóa mô tả đối tượng cũng có thể được chia thành bốn loại (nên được sắp xếp theo thứ tự từ trái sang phải): Đối tượng, Mô tả đối tượng, Hành động và Mô tả hành động.

xe hơi - một danh từ và một đối tượng
mới - một tính từ và một mô tả đối tượng mô tả đối tượng chi tiết hơn
- một động từ và một hành động thuộc về
quyền của đối tượng - một tính từ và một mô tả hành động mô tả hành động chi tiết hơn

Lưu ý: động từ (hành động) nên ở thì quá khứ (biến, đã làm, đã chạy, v.v.).

Mối quan hệ

Đối tượng cũng có thể có các mối quan hệ như cha mẹ và con cái. Bộ mô tả hành động và hành động thuộc về đối tượng cha, chúng không thuộc về đối tượng con. Đối với mối quan hệ giữa các đối tượng, bạn có thể sử dụng dấu gạch dưới.

xe-new-Turn-right_wheel-left-Turn-left

• xe-mới-rẽ-phải (theo quy tắc sở hữu)
• bánh xe quay trái-trái (theo quy tắc sở hữu)
• xe-new-Turn-right_wheel-left-Turn-left (tuân theo quy tắc quan hệ)

Ghi chú cuối cùng:

• Vì CSS không phân biệt chữ hoa chữ thường, tốt hơn nên viết tất cả các tên bằng chữ thường (hoặc chữ hoa); tránh trường hợp lạc đà hoặc trường hợp pascal vì chúng có thể dẫn đến những cái tên mơ hồ.
• Biết khi nào nên sử dụng một lớp và khi nào nên sử dụng id. Nó không chỉ là về một id được sử dụng một lần trên trang web. Hầu hết thời gian, bạn muốn sử dụng một lớp chứ không phải id. Các thành phần web như (nút, biểu mẫu, bảng điều khiển, v.v.) phải luôn sử dụng một lớp. Id có thể dễ dàng dẫn đến xung đột đặt tên và nên được sử dụng một cách tiết kiệm để đặt tên cho đánh dấu của bạn. Các khái niệm về quyền sở hữu và mối quan hệ ở trên áp dụng cho việc đặt tên cả lớp và id và sẽ giúp bạn tránh đặt tên xung đột.
• Nếu bạn không thích quy ước đặt tên CSS của tôi, thì cũng có một số quy ước khác: Quy ước đặt tên cấu trúc, quy ước đặt tên theo trình bày, quy ước đặt tên ngữ nghĩa, quy ước đặt tên BEM, quy ước đặt tên OCSS, v.v.

Một lý do khác khiến nhiều người thích dấu gạch ngang trong CSS id và tên lớp là chức năng.

Sử dụng các phím tắt như option+ left/ right(hoặc ctrl+ left/ righttrên Windows) để duyệt mã từng từ sẽ dừng con trỏ ở mỗi dấu gạch ngang, cho phép bạn duyệt chính xác tên id hoặc tên lớp bằng phím tắt. Dấu gạch dưới và camelCase không được phát hiện và con trỏ sẽ trôi ngay trên chúng như thể tất cả chỉ có một từ.

Tôi mới bắt đầu học XML. Phiên bản gạch dưới giúp tôi tách mọi thứ liên quan đến XML (DOM, XSD, v.v.) khỏi các ngôn ngữ lập trình như Java, JavaScript (trường hợp lạc đà). Và tôi đồng ý với bạn rằng sử dụng các định danh được phép trong các ngôn ngữ lập trình có vẻ tốt hơn.

Chỉnh sửa: Có thể không liên quan, nhưng đây là liên kết cho các quy tắc và đề xuất về cách đặt tên các phần tử XML mà tôi tuân theo khi đặt tên id (phần "Quy tắc đặt tên XML" và "Thực tiễn đặt tên tốt nhất").

http://www.w3schools.com/xml/xml_elements.asp

Tôi nghĩ rằng nó phụ thuộc vào nền tảng. Khi phát triển trong .Net MVC, tôi sử dụng chữ thường và dấu gạch ngang kiểu bootstrap cho tên lớp, nhưng đối với id tôi sử dụng PascalCase.

Lý do cho điều này là quan điểm của tôi được hỗ trợ bởi các mô hình khung nhìn được gõ mạnh. Thuộc tính của mô hình C # là trường hợp pascal. Vì mục đích liên kết mô hình với MVC, nên có nghĩa là tên của các phần tử HTML liên kết với mô hình phù hợp với các thuộc tính mô hình xem là trường hợp pascal. Để đơn giản, các id của tôi sử dụng cùng một quy ước đặt tên như các tên thành phần ngoại trừ các nút radio và hộp kiểm yêu cầu id duy nhất cho mỗi thành phần trong nhóm đầu vào được đặt tên.