2010-02-26 63 views
20

Các phương pháp hay nhất khi đặt tên cho bộ chọn CSS là gì?Sử dụng chữ hoa, dấu gạch ngang hoặc dấu gạch dưới khi đặt tên cho bộ chọn css

SomeContainerContent 
some_container_content 
some-container-content 

Tôi đọc các câu hỏi tương tự khác ở đây trên ngăn xếp tràn, nhưng không có sự đồng thuận chung trong câu trả lời. Tôi đã tự hỏi nếu có ai khác có thêm để thêm.

+1

Không có sự đồng thuận vì nó không quan trọng. Đặt tên chúng là bạn muốn! – Shog9

Trả lời

28

Ý nghĩ chung là sử dụng dấu gạch ngang. Có, trên thực tế, các vấn đề tương thích tiềm năng với các tùy chọn khác.

  • Dấu gạch dưới không được phép trong tên lớp hoặc ID trong các trình duyệt nhất định (được cấp, cũ, loại NS4).
  • Thông số CSS không chỉ định cách trình duyệt nên xử lý trường hợp, do đó, sử dụng camelCase để lại một mở để giải thích không rõ ràng.

Ngoài ra, CSS sử dụng dấu gạch nối nội bộ cho những thứ như first-child.

Mặc dù các sự cố về tính tương thích thường không phải là vấn đề trong các trình duyệt hiện đại, đó là cách tiêu chuẩn xuất hiện và tôi khuyên bạn nên tuân thủ. Bạn sẽ ổn nếu bạn bị lệch, nhưng tại sao lại bận tâm?

+2

Điểm tốt. Ngoài ra, tôi không thể sử dụng dấu gạch ngang trong tên biến và trong các phương thức trợ giúp trong đường ray, điều này bổ sung thêm một đầu mối khác để phân biệt các lớp css nếu tôi giữ chúng. – deb

2

Tôi thực sự nghĩ rằng điều đó tùy thuộc vào bạn. Tuy nhiên, điều quan trọng là phải nhất quán. Ví dụ, tôi thích sử dụng dấu gạch dưới cho id và dấu gạch ngang cho các lớp.

+2

...thực sự nghe có vẻ không phù hợp với tôi, vì bộ não của tôi nhóm CSS như một thứ. Đó có phải là để giữ cho các lớp và ID riêng biệt, như xa như lưu trữ tinh thần đi? – Matchu

0

Nó thực sự không quan trọng và đi xuống theo sở thích cá nhân của bạn. Tuy nhiên, đối với một dự án cần nhất quán! Vì vậy, nếu đã có một css hiện tại, đi cho phong cách thiết lập theo phong cách này.

0

Tôi sử dụng dấu gạch ngang (-) cho mọi thứ HTML/CSS và dấu gạch dưới cho biến PHP. Giữ mọi thứ được tổ chức cho tôi.

0

Tôi sử dụng dấu gạch ngang. Có lẽ vì rất nhiều thứ trên web có phân biệt chữ hoa chữ thường và tôi có thói quen sử dụng tất cả chữ thường cho tên tệp và như vậy khi làm việc trên web. Dấu gạch dưới khó nhìn thấy khi được gạch dưới, vì vậy tôi cũng tránh xa chúng.

Có vẻ hầu hết mọi người CamelCase mặc dù:

poll on what people use

+0

Đó là một liên kết thú vị, cảm ơn bạn đã chia sẻ. CamelCase là điều khó hiểu nhất đối với tôi, vì tôi thường sử dụng tên lớp ruby ​​trong CamelCase. – deb

0

"Trong CSS, số nhận dạng (bao gồm tên phần tử, lớp và ID trong bộ chọn) chỉ có thể chứa ký tự [a-zA-Z0-9] và ISO 10646 ký tự U + 00A1 và cao hơn, dấu gạch ngang (-) và dấu gạch dưới (_), chúng không thể bắt đầu bằng một chữ số, hoặc dấu gạch ngang theo sau là một chữ số. B & W? "Có thể được viết là" B \ & W \? "Hoặc" B \ 26 W \ 3F "."

3
.hyphens-for-multi-word-names 
.underscores_for_pseudo_namespacing 

Kết quả trong:

.grid-system_push-100 
\_________/ \______/ 
    namespace object 

Namespace và đối tượng có thể dễ dàng có mục tiêu cho một loại BEM thực hiện.

.grid-slot { }   /* block */ 

.grid-slot_size-100 { } /* block-specific modifier */ 

._size-100    /* generic modifier */ 

My $ 0.02

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