Điều gì tốt hơn trong CSS: div.something hoặc chỉ .something

Question

Trong CSS, khi đặt kiểu trên div (ví dụ) có bất kỳ lợi ích nào trong việc bao gồm 'div' ngoài việc cung cấp độ chính xác hơn cho phù hợp. Trình duyệt có thể hiển thị nhanh hơn không?

tức là:

div.something { font-size: 1em; } 

tốt hơn so với

.something { font-size: 1em; } 

đối với bất kỳ lý do nào khác ngoài việc thu hẹp nó xuống để chỉ divs?

(Lý do tôi hỏi là tôi thời gian gần đây đã xảy ra trên một trang web nổi bật bao gồm các 'div nhưng hầu hết có xu hướng không làm phiền)

UPDATE:

Cảm ơn tất cả các câu trả lời. Kết luận là tốc độ là một yếu tố nhưng không đáng chú ý nên đáng bỏ qua. Và sự đồng thuận về thực tiễn tốt nhất là việc bao gồm thẻ là sạch hơn - quy tắc chung nên giữ CSS càng chặt chẽ càng tốt cho kiểu được yêu cầu.

Answer 1

Bên cạnh ngữ nghĩa khác nhau của cả hai selectors, đọc: Speed of CSS

Answer 2

Vâng, nếu bạn muốn có các thẻ khác có cùng tên lớp thì có một lần xuất hiện khác thì bạn nên làm điều đó.

Tôi luôn bao gồm tên thẻ để dễ đọc hơn và tôi chắc chắn rằng tôi sẽ không ghi đè các quy tắc khác nếu chúng chia sẻ một tên lớp.

Answer 3

Tôi nghĩ mục đích duy nhất giống như bạn đã nói "thu hẹp nó xuống chỉ còn các div". Vì vậy, <p class="something"> sẽ hoạt động giống hoặc không giống như div ...

Answer 4

Tôi nghĩ vấn đề này rất giống với khái niệm lập trình thường được biết đến về giới hạn phạm vi: bạn giới hạn phạm vi của biến và các tài nguyên khác ở mức tối thiểu .

Tương tự, nếu bạn biết rằng một kiểu sẽ chỉ được sử dụng với các div với lớp đó, bạn nên hạn chế "phạm vi của lớp" thành div. Nó làm cho ít lộn xộn và làm cho stylesheets của bạn phần nào duy trì được nhiều hơn.

Answer 5

nếu bạn muốn sử dụng một lớp trên hơn chỉ divs, bạn chỉ có thể sử dụng một lớp chung chung như

.something{} 

nhưng cụ thể hơn một lớp học, càng nổi bật hơn, bất kể thứ tự, nghĩa là:

#someID div.something { background: green; } 
div.something { background: blue;} 
.something { background: red; } 

Vì cái đầu tiên là cụ thể nhất:

<div class="something"> this will be blue </div> 
<div id="someID"> 
    <div class="something"> 
    this will be green 
    </div> 
</div> 
<p class="something">this will be red</div> 

Answer 6

Thêm div vào đầu bộ chọn tạo phụ thuộc bổ sung giữa quy tắc css và tài liệu html. Thay đổi kiểu phần tử đột nhiên cũng yêu cầu bạn thay đổi css, vì không có lý do chính đáng.

Đối với kịch bản mà bạn cần phải xác định loại phần tử để phân biệt giữa hai quy tắc, tôi khuyên bạn nên thay đổi tên lớp thay thế. Đừng hy vọng rằng div luôn luôn là một div. Nó có thể có ý nghĩa hơn như một p hoặc fieldset hoặc nhãn.

Tránh các phụ thuộc không cần thiết.

Quy tắc css có độ đặc hiệu thấp là một vấn đề, nhưng việc thêm loại phần tử không phải là giải pháp. Nếu giá của tôi đã được thay đổi thành div.price, xác suất cho các kết quả không mong muốn chỉ được giảm nhẹ. Bạn sẽ được tốt hơn off off namespacing nó với một #id bên ngoài.

Answer 7

Thêm bộ chọn phần tử (div) cho quy tắc tăng specificity của quy tắc, làm cho nó quan trọng hơn một selector lớp generic (.something)

Nó cũng làm cho CSS của bạn dễ đọc hơn. Nếu tất cả các bộ chọn lớp của bạn không được thêm vào trước với các phần tử, điều đó có nghĩa là các lớp của bạn là phi thường và có thể áp dụng cho bất kỳ phần tử nào. (Đây có thể là ý định, nhưng thường thì không)

Như đã nêu ở trên, có một sự cân bằng tốc độ bằng cách sử dụng tên phần tử, nhưng nó hầu như không đáng chú ý.

Answer 8

Lớp học phải được cấu trúc tốt, chức năng và nguyên tử. Đôi khi nó là tốt để thu hẹp nó xuống để element.name nếu bạn nghĩ rằng bạn sẽ có những tình huống như

div.highlight { 
    background: #FF00FF; 
} 

span.highlight, p.highlight { 
    color: #FF00FF; 
} 

Nếu không, bạn sẽ phải làm một cái gì đó giống như

.highlight { 
    color: #FF00FF; 
} 

div.highlight { 
    background; #FF00FF; 
    color: inherit; 
} 

Tôi nghĩ rằng, như một quy luật chung của ngón tay cái, rằng một định nghĩa lớp học sẽ làm việc cho tất cả các yếu tố áp dụng cho nó. Nếu có một tình huống cụ thể mà bạn phải ghi đè các định nghĩa mặc định của một lớp mà bạn nên, đối với người mới bắt đầu, ít nhất hãy xác định một lớp mới để bạn không phá vỡ bản trình bày trên các phần tử khác.

Bạn cũng sẽ phải làm việc ra khi để tránh phụ thuộc cấu trúc như trên selectors của bạn, giống như

div#main div.section h1.title span.link { } 

Nhưng nó muốn được tốt hơn chỉ để viết

div#main span.link {} 

Answer 9

Nó sẽ không tạo sự khác biệt trừ khi bạn sử dụng lại lớp học something ở một nơi khác và tất nhiên bạn không có xung đột nào cần được giải quyết bằng lược đồ ưu tiên CSS. Nếu trường hợp này xảy ra, div.something có mức độ ưu tiên cao hơn là .something vì nó cụ thể hơn. Hãy xem Calculating a selector's specificity từ số CSS2 Specification.