Which CSS Selector is better practice? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the he开发者_StackOverflowlp center for guidance. Closed 11 years ago.

I am wondering which selector is better practice and why?

Sample HTML Code

<div class="main">
   <div class="category">
      <div class="product">
      </div>
   </div>
</div>

and we want to reach .product with CSS selectors:

1. .product
2. .main .category .product
3. div.main div.category div.product

I am comparing them to the following criteria:

• Performance
• Maintainability
• Readability

We may assume that .product is unique throughout the page. We can have used id instead of class but in this case, we chose class attribute.

---

We may assume that .product is unique throughout the page.

Performance-wise the best would of course have been an ID selector but since you're using a class instead, .product would come second.

As for maintainability, readability and semantics (there's a bit more on performance as well)...

1. .product means

   Find any elements that have a class product.

   Very easy to understand, almost identical to an ID selector if you use this based on the above assumption.

   I guess the only difference between using a class selector and an ID selector in this case is that an ID selector enforces uniqueness of this element, and not only because there just happens to be one such element. In other words, an ID selector acts on the knowledge that a document will only have one such unique element, while a class selector does not.

2. .main .category .product means

   Find any elements that have a class product
   which are contained in any elements that have a class category
   which are contained in any elements that have a class main.

   Browsers are tasked with checking the ancestry of these elements, which is redundant if you only have one .product. Many browser layout engines evaluate CSS selectors from right to left, similarly to how I translated the selector to English as above.

3. div.main div.category div.product means

   Find only <div> elements that have a class product
   which are contained in only <div> elements that have a class category
   which are contained in only <div> elements that have a class main.

   In addition with checking the hierarchy of elements, you expect a browser to only match a div with the class product. If you want to match any element of this class then this selector wouldn't work as intended.

   If you're sure you will only have exactly one div with that class, and you want to only match that element, then you could use div.product instead, but .product still performs fractionally better.

---

I'm no guru but I can at least comment.
I think first way is easily the best:

• it prevents the CSS from having to traverse the DOM tree to find an element,
• if you edit any of the parent elements then you will have to edit the CSS selector. Readability: personal choice, some people may like the second, but most won't really mind

---

I always try to use the smallest selector possible, so I would just use .product (i.e. your first example). I think this also has performance benefits since the browser only has to find elements marked with that single class, rather than trying to find a matching parent first, then checking to find out if it has a descendant marked with that class, etc.

The only reason I generally have to use the other methods you mention is if:

• I'm trying to add specific styling under a specific context. For example if I wanted to bold all internal links (under a .internal_link class), but wanted them to also be underlined if they appeared in a certain context.
• I need to add specificity in order to force my rule to take effect.

Finally, if you're assuming that there will only be one element marked with the .product class, then you're probably better off using that as an ID rather than as a class.

---

All the three selectors have different meanings and should be used at different places as the need be. Performance wise, the first should be the best, because we just need to travel the DOM once. Readability wise also the second and the third selectors seem cumbersome and may be difficult to extend in future.

---

1. .product
2. .main .category .product
3. div.main div.category div.product

Using the above selectors are depending on how complicated your site is.

Ex.

1. If all these elements is use only ones. The first selector may be fit.

2. The second way is best practice if you were using this for multiple pages(ex. you have these elements for a set of products).

3. The 3rd way for me is unnecessary unless you have this class name in other HTML tags like span..

more tips: Mushu Tricks

---

The first way .product is the best and the most easiest. If you use the .product you need not go through the entire file to find what you are looking for. You can also use an ID selector without using a class.