Tại sao dấu gạch ngang được ưa thích cho các bộ chọn CSS / thuộc tính HTML?

Trước đây, tôi luôn sử dụng dấu gạch dưới để xác định các thuộc tính lớp và id trong HTML. Trong vài năm qua, tôi đã thay đổi thành dấu gạch ngang, chủ yếu là để phù hợp với xu hướng trong cộng đồng , không nhất thiết là vì nó có ý nghĩa với tôi.

Tôi đã luôn nghĩ rằng dấu gạch ngang có nhiều nhược điểm hơn và tôi không thấy lợi ích:

Hoàn thành & chỉnh sửa mã

Hầu hết các biên tập viên coi dấu gạch ngang là dấu phân cách từ, vì vậy tôi không thể chuyển qua biểu tượng tôi muốn. Giả sử lớp là " featured-product", tôi phải tự động hoàn thành " featured", nhập dấu gạch nối và hoàn thành " product".

Với dấu gạch dưới " featured_product" được coi là một từ, vì vậy nó có thể được điền vào một bước.

Điều tương tự áp dụng để điều hướng thông qua các tài liệu. Nhảy bằng từ hoặc nhấp đúp vào tên lớp bị phá vỡ bởi dấu gạch nối.

(Nói chung, tôi nghĩ rằng các lớp và id là mã thông báo , vì vậy nó không có ý nghĩa với tôi rằng mã thông báo phải dễ dàng chia tách trên các dấu gạch nối.)

Sự mơ hồ với toán tử số học

Sử dụng dấu gạch ngang phá vỡ quyền truy cập thuộc tính đối tượng để tạo thành các phần tử trong JavaScript. Điều này chỉ có thể với dấu gạch dưới:

form.first_name.value='Stormageddon';

(Phải thừa nhận rằng bản thân tôi không truy cập các phần tử biểu mẫu theo cách này, nhưng khi quyết định dấu gạch ngang so với dấu gạch dưới là quy tắc chung, hãy xem xét rằng ai đó có thể.)

Các ngôn ngữ như Sass (đặc biệt là trong toàn bộ khung La bàn ) đã giải quyết các dấu gạch ngang như một tiêu chuẩn, ngay cả đối với các tên biến. Ban đầu họ cũng sử dụng dấu gạch dưới. Thực tế là điều này được phân tích cú pháp khác nhau đánh tôi là kỳ quặc:

$list-item-10
$list-item - 10

Không thống nhất với cách đặt tên khác nhau giữa các ngôn ngữ

Trước đây, tôi thường viết underscored_namescho các biến trong PHP, ruby, HTML / CSS và JavaScript. Điều này thuận tiện và nhất quán, nhưng một lần nữa để "phù hợp" tôi hiện đang sử dụng:

• dash-case trong HTML / CSS
• camelCase trong JavaScript
• underscore_case trong PHP và ruby

Điều này thực sự không làm phiền tôi quá nhiều, nhưng tôi tự hỏi tại sao những điều này trở nên sai lệch, dường như có chủ đích. Ít nhất với dấu gạch dưới có thể duy trì tính nhất quán:

var featured_product = $('#featured_product'); // instead of
var featuredProduct = $('#featured-product');

Sự khác biệt tạo ra tình huống trong đó chúng ta phải dịch các chuỗi không cần thiết, cùng với khả năng xảy ra lỗi.

Vì vậy, tôi hỏi: Tại sao cộng đồng gần như phổ biến trên dấu gạch ngang, và có bất kỳ lý do nào vượt trội hơn so với dấu gạch dưới?

Có một câu hỏi liên quan từ thời điểm này bắt đầu, nhưng tôi cho rằng đó không phải (hoặc không nên ) chỉ là vấn đề của hương vị. Tôi muốn hiểu lý do tại sao tất cả chúng ta giải quyết theo quy ước này nếu nó thực sự chỉ là vấn đề của hương vị.

Hoàn thành mã

Cho dù dấu gạch ngang được hiểu là dấu chấm câu hoặc là một định danh mờ đục tùy thuộc vào trình soạn thảo lựa chọn, tôi đoán. Tuy nhiên, theo sở thích cá nhân, tôi thích có thể tab giữa mỗi từ trong tệp CSS và sẽ thấy khó chịu nếu chúng được phân tách bằng dấu gạch dưới và không có điểm dừng.

Ngoài ra, sử dụng dấu gạch nối cho phép bạn tận dụng bộ chọn thuộc tính | = , chọn bất kỳ phần tử nào chứa văn bản, theo sau là dấu gạch ngang:

span[class|="em"] { font-style: italic; }

Điều này sẽ làm cho các thành phần HTML sau có kiểu chữ in nghiêng:

<span class="em">I'm italic</span>
<span class="em-strong">I'm italic too</span>

Sự mơ hồ với toán tử số học

Tôi muốn nói rằng việc truy cập vào các phần tử HTML thông qua ký hiệu dấu chấm trong JavaScript là một lỗi chứ không phải là một tính năng. Đó là một cấu trúc khủng khiếp từ những ngày đầu triển khai JavaScript khủng khiếp và thực sự không phải là một thực tiễn tuyệt vời. Đối với hầu hết những thứ bạn làm với JavaScript hiện nay, bạn muốn sử dụng Bộ chọn CSS để tìm nạp các phần tử từ DOM, điều này làm cho toàn bộ ký hiệu dấu chấm khá vô dụng. Bạn thích cái nào hơn?

var firstName = $('#first-name');
var firstName = document.querySelector('#first-name');
var firstName = document.forms[0].first_name;

Tôi thấy hai tùy chọn đầu tiên thích hợp hơn nhiều, đặc biệt là vì '#first-name'có thể được thay thế bằng biến JavaScript và được xây dựng linh hoạt. Tôi cũng thấy chúng dễ chịu hơn trên mắt.

Thực tế là Sass cho phép số học trong các phần mở rộng của nó cho CSS không thực sự áp dụng cho chính CSS, nhưng tôi hiểu (và chấp nhận) thực tế là Sass tuân theo phong cách ngôn ngữ của CSS (ngoại trừ $tiền tố của các biến, tất nhiên nên đã được @). Nếu các tài liệu Sass trông giống như các tài liệu CSS, thì chúng cần phải theo cùng một kiểu với CSS, sử dụng dấu gạch ngang làm dấu phân cách. Trong CSS3, số học được giới hạn trong calchàm, điều này cho thấy rằng trong chính CSS, đây không phải là vấn đề.

Không thống nhất với cách đặt tên khác nhau giữa các ngôn ngữ

Tất cả các ngôn ngữ, là ngôn ngữ đánh dấu, ngôn ngữ lập trình, ngôn ngữ tạo kiểu hoặc ngôn ngữ kịch bản, có phong cách riêng. Bạn sẽ tìm thấy điều này trong các ngôn ngữ phụ của các nhóm ngôn ngữ như XML, trong đó, ví dụ XSLT sử dụng chữ thường với dấu phân cách dấu gạch nối và Lược đồ XML sử dụng vỏ lạc đà.

Nói chung, bạn sẽ thấy rằng việc áp dụng phong cách cảm nhận và trông "bản địa" nhất đối với ngôn ngữ bạn đang viết sẽ tốt hơn là cố gắng kết hợp phong cách của riêng bạn vào mọi ngôn ngữ khác nhau. Vì bạn không thể tránh phải sử dụng các thư viện gốc và cấu trúc ngôn ngữ, nên phong cách của bạn sẽ bị "ô nhiễm" bởi phong cách bản địa dù bạn có thích hay không, do đó, thậm chí còn khá vô ích để thử.

Lời khuyên của tôi là không tìm thấy một phong cách yêu thích trên các ngôn ngữ, mà thay vào đó hãy tự mình ở nhà trong từng ngôn ngữ và học cách yêu tất cả những điều kỳ quặc của nó. Một trong những điều kỳ quặc của CSS là các từ khóa và mã định danh được viết bằng chữ thường và phân tách bằng dấu gạch nối. Cá nhân, tôi thấy điều này rất hấp dẫn trực quan và nghĩ rằng nó phù hợp với HTML tất cả chữ thường (mặc dù không có dấu gạch ngang) .

Có lẽ một lý do chính tại sao cộng đồng HTML / CSS tự liên kết với dấu gạch ngang thay vì dấu gạch dưới là do thiếu sót lịch sử trong thông số kỹ thuật và việc triển khai trình duyệt.

Từ một tài liệu Mozilla được xuất bản vào tháng 3 năm 2001 @ https://developer.mozilla.org/en-US/docs/Underscores_in_group_and_ID_Names

Đặc tả CSS1, được xuất bản ở dạng cuối cùng vào năm 1996, không cho phép sử dụng dấu gạch dưới trong tên lớp và tên ID trừ khi chúng được "thoát". Một dấu gạch dưới được thoát sẽ trông giống như thế này:

    p.urgent\_note {color: maroon;}

Điều này không được hỗ trợ tốt bởi các trình duyệt vào thời điểm đó, tuy nhiên, và thực tế chưa bao giờ bắt kịp. CSS2, được xuất bản năm 1998, cũng cấm sử dụng dấu gạch dưới trong tên lớp và tên ID. Tuy nhiên, errata theo đặc điểm kỹ thuật được công bố vào đầu năm 2001 đã lần đầu tiên nhấn mạnh hợp pháp. Điều này không may phức tạp một cảnh quan đã phức tạp.

Tôi thường thích dấu gạch dưới nhưng dấu gạch chéo ngược chỉ làm cho nó xấu đi ngoài hy vọng, chưa kể đến sự hỗ trợ khan hiếm tại thời điểm đó. Tôi có thể hiểu tại sao các nhà phát triển tránh nó như bệnh dịch hạch. Tất nhiên, ngày nay chúng ta không cần dấu gạch chéo ngược, nhưng nghi thức gạch ngang đã được thiết lập vững chắc.

Tôi không nghĩ ai đó có thể trả lời dứt khoát, nhưng đây là những phỏng đoán có học thức của tôi:

1. Dấu gạch dưới yêu cầu nhấn phím Shift và do đó khó nhập hơn.

2. Các bộ chọn CSS là một phần của các đặc tả CSS chính thức sử dụng dấu gạch ngang (chẳng hạn như các lớp giả như: phần tử con đầu tiên và phần tử giả: dòng đầu tiên), không gạch dưới. Điều tương tự cho các thuộc tính, ví dụ trang trí văn bản, màu nền, vv Các lập trình viên là những sinh vật của thói quen. Có ý nghĩa rằng họ sẽ theo phong cách của tiêu chuẩn nếu không có lý do chính đáng để không.

3. Cái này nằm xa hơn trên gờ đá, nhưng ... Dù là huyền thoại hay thực tế, có một ý tưởng từ lâu rằng Google coi các từ được phân tách bằng dấu gạch dưới là một từ duy nhất và các từ được phân tách bằng dấu gạch ngang là các từ riêng biệt. (Matt Cutts trên Underscores so với Dash.) Vì lý do này, tôi biết rằng sở thích của tôi bây giờ để tạo URL trang là sử dụng từ-dấu-gạch ngang và đối với tôi, ít nhất, điều này đã được đưa vào quy ước đặt tên của tôi cho những thứ khác , giống như các bộ chọn CSS.

Có nhiều lý do, nhưng một trong những điều quan trọng nhất là duy trì tính nhất quán .

Tôi nghĩ rằng đây bài viết giải thích nó một cách toàn diện.

CSS là một cú pháp được phân cách bằng dấu gạch nối. Bằng cách này, tôi có nghĩa là chúng ta viết những thứ như font-size, line-height, border-bottom, vv

Vì thế:

Bạn chỉ không nên trộn các cú pháp: nó không nhất quán .

Đã có một sự gia tăng rõ ràng trong các phân đoạn toàn bộ các từ được phân tách bằng dấu gạch nối trong những năm gần đây. Điều này được khuyến khích bởi các thực tiễn tốt nhất về SEO. Google rõ ràng "khuyên bạn nên sử dụng dấu gạch ngang (-) thay vì dấu gạch dưới (_) trong các URL của bạn": http://www.google.com/support/webmasters/ Campo76329 .

Như đã lưu ý, các quy ước khác nhau đã chiếm ưu thế tại các thời điểm khác nhau trong các bối cảnh khác nhau, nhưng chúng thường không phải là một phần chính thức của bất kỳ giao thức hoặc khung nào.

Do đó, giả thuyết của tôi là vị trí của Google neo mô hình này trong một bối cảnh chính (SEO) và xu hướng sử dụng mô hình này trong các tên lớp, id và thuộc tính chỉ đơn giản là bầy đàn di chuyển chậm theo hướng chung này.

Tôi nghĩ đó là một thứ phụ thuộc vào lập trình viên. Một số người thích sử dụng dấu gạch ngang, những người khác sử dụng dấu gạch dưới.
Cá nhân tôi sử dụng dấu gạch dưới ( _) vì tôi cũng sử dụng nó ở những nơi khác. Chẳng hạn như:
- Biến JavaScript ( var my_name);
- Hành động điều khiển của tôi ( public function view_detail)
Một lý do khác mà tôi sử dụng dấu gạch dưới, đó là vì trong hầu hết các IDE, hai từ được phân tách bằng dấu gạch dưới được coi là 1 từ. (và có thể chọn với double_click).