4 ms·

> Avoid qualifying ID and class names with type selectors. Unless necessary (for example with helper classes), do not use element names in conjunction with IDs

by kapowaz 14y ago

> Avoid qualifying ID and class names with type selectors. Unless necessary (for example with helper classes), do not use element names in conjunction with IDs or classes. I've never heard a decent explanation for why, with this one. Unless you're intentionally creating a rule which is broad in scope, adding the element name helps document a rule, giving somebody who is unfamiliar with this CSS some context on how the rule is used. Other than saving a scant few bytes here and there, I can't see what the benefit is.

crazygringo 14y ago
I personally never specify "div", but always specify anything non-div. This just reminds me in my CSS, what declarations I can expect to come "by default" with the element. If it's a "span.x" then I know it has "display:inline" by default. The only exception is that I generally don't specify with "h1", "h2", etc. because I'll want to be able to move those around in the HTML for SEO reasons, and not have to keep changing my CSS to go along.
isleyaardvark 14y ago
The ID or class name should document the rule (or a comment). Ideally CSS rules should be broad in scope so they can be reused, and you're not rewriting rules for different elements. It's unnecessarily limiting you to that one tag.
halefx 14y ago
Semantically, a meaningful class or id shouldn't always need to be qualified by the element type. There are certainly times when you'd want to, though, if the element type changes the meaning. E.g., An e-commerce site that displays products in both the main content region and the sidebar. Product names use h1 tags in the main content region and h2 tags in the sidebar. Selectors like h1.product-title and h2.product-title have different meanings, and they're more efficient than the alternative selectors #main .product-title and #sidebar .product-title. From a performance standpoint, qualifying class and id selectors by the element type is probably less efficient than not qualifying them, so doing it unnecessarily makes the selector longer and more difficult to maintain and decreases performance.

by kapowaz 14y ago

crazygringo 14y ago

I personally never specify "div", but always specify anything non-div. This just reminds me in my CSS, what declarations I can expect to come "by default" with the element. If it's a "span.x" then I know it has "display:inline" by default. The only exception is that I generally don't specify with "h1", "h2", etc. because I'll want to be able to move those around in the HTML for SEO reasons, and not have to keep changing my CSS to go along.

isleyaardvark 14y ago

The ID or class name should document the rule (or a comment). Ideally CSS rules should be broad in scope so they can be reused, and you're not rewriting rules for different elements. It's unnecessarily limiting you to that one tag.

halefx 14y ago

Semantically, a meaningful class or id shouldn't always need to be qualified by the element type. There are certainly times when you'd want to, though, if the element type changes the meaning. E.g., An e-commerce site that displays products in both the main content region and the sidebar. Product names use h1 tags in the main content region and h2 tags in the sidebar. Selectors like h1.product-title and h2.product-title have different meanings, and they're more efficient than the alternative selectors #main .product-title and #sidebar .product-title. From a performance standpoint, qualifying class and id selectors by the element type is probably less efficient than not qualifying them, so doing it unnecessarily makes the selector longer and more difficult to maintain and decreases performance.