CSS: Sử dụng loại thẻ trước ID?

Question

Một trong những người ở đây tại nơi làm việc đặt tên thẻ ở trước tất cả các bộ chọn CSS của mình cho các id phần tử. Ví dụ:

div#footer { 

} 

này, như trái ngược với chỉ:

#footer { 

} 

lý do của ông là rằng đây là một tra cứu nhanh hơn đối với hầu hết các trình duyệt vì họ không cần phải kiểm tra các id thuộc tính của mỗi loại phần tử - chỉ cần div yếu tố. Ông cũng chỉ ra rằng điều này nên được thực hiện với các lớp học (ví dụ: div.header-label cho các yếu tố <div class="header-label"...).

Âm thanh hợp lý và hợp lý, nhưng có đúng không?

Answer 1

đồng nghiệp của bạn là sai, đó là hoàn toàn ngược lại:

• https://developer.mozilla.org/en/Writing_Efficient_CSS
• http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html

Nhưng cũng có nhớ rằng CSS tối ưu hóa là vi tối ưu hóa và cuối cùng chỉ không thích hợp trong hầu hết các trường hợp:

• http://meiert.com/en/blog/20090312/performance-of-css-selectors/

Answer 2

Có thể không đúng; công cụ bố cục có khả năng xây dựng một hashtable.

Tuy nhiên, nó chắc chắn sẽ không tạo sự khác biệt đáng chú ý, trừ khi trang của bạn có số lượng yếu tố điên rồ. (Trong trường hợp này bạn gặp vấn đề tồi tệ hơn)

Bạn nên sử dụng bất kỳ bộ chọn nào dễ đọc hơn.
Ngoài ra, hãy nhớ rằng ai đó có thể thay đổi #footer thành <span>.

Answer 3

Cá nhân tôi không nghĩ rằng hiệu suất có thể là một vấn đề ở đây, trừ khi nhiều phong cách cần phải được thay đổi theo chế độ ăn tối.

Trong mọi trường hợp, hai ví dụ khác nhau về mặt ngữ nghĩa vì #footer sẽ bao gồm các trường hợp mà div#footer sẽ không. Vì vậy, ngoài hương vị cá nhân, chúng ta đang nói về hai thứ khác nhau. Sau đó, nếu bạn thực sự sử dụng ID vì chúng nên được sử dụng, không có sự khác biệt nào cả ..

Answer 4

Thời gian duy nhất đây là một thực tiễn hữu ích, IMHO, là khi bạn có nhiều loại thẻ sử dụng cùng một ID, tất nhiên, không hợp lệ. Tuy nhiên, nếu bạn được cung cấp một đoạn HTML/CSS không hợp lệ để bắt đầu và không thể sửa chữa nó đúng cách, việc sử dụng TAGTYPE # ID có thể hữu ích.

Answer 5

Gắn thẻ vào id cụ thể hơn. Bạn có thể tạo id trong css mà bạn có thể áp dụng cho bất kỳ phần tử nào, nhưng nếu bạn đính kèm tên thẻ, bạn CHỈ có thể sử dụng các quy tắc đó (trừ khi bạn liệt kê các phần tử, lớp hoặc id khác bằng dấu phẩy) bằng id THAT :

http://www.w3.org/TR/CSS2/selector.html#id-selectors

Answer 6

Thật khó để tưởng tượng việc sử dụng hợp lệ cho CSS "tính năng" này.

Giả sử một biểu mẫu có trường year.

input#year { 
    width: 4em; 
} 

Điều này sẽ ngăn quy tắc áp dụng nếu, ví dụ trường được hiển thị dưới dạng select.

Đối với yếu tố hiệu suất, tôi nghĩ rằng @Dave thực hiện việc gỡ lỗi tốt nhất.