Which CSS selector works best?

Question

I am wondering which selector is best practiced and why?

HTML sample code

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

and we want to achieve .product with CSS selectors:

• .product
• .main .category .product
• div.main div.category div.product

I compare them with the following criteria:

• Performance
• maintainability
• readability

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

Answer 1

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

Effectively the best , of course, was an identifier selector, but since you are using the class instead, the .product will be the second.

As for maintainability, readability, and semantics (there's also a bit more about performance) ...

• .product means

  Find any items that have a product class.

  It is very easy to understand, almost identical to the ID selector, if you use it based on the above assumption.

  I assume that the only difference between using the class selector and the identifier selector in this case is that the identifier selector ensures the uniqueness of this element, and not only because only one of them is one of such elements. In other words, the identifier selector acts on the knowledge that the document will have only one such unique element, while the class selector does not.

• .main .category .product means

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

  The browser is tasked with checking the origin of these elements, which is redundant if you have only one .product . Many browser layout engines evaluate the CSS selector from right to left , similar to how I translated the selector into English, as described above.

• div.main div.category div.product means

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

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

  If you are sure that you will have only one div with this class, and you only want to combine this element, you can use div.product , but .product still performs the fractionally better one.

Answer 2

I am not a guru, but I can at least comment. I think the first way is easily the best:

• it does not allow CSS to navigate the DOM tree to find an element,
• if you are editing any of the parent elements, you will have to edit the CSS selector. Readability: a personal choice, some people may like the second, but most will not mind.

Answer 3

I always try to use the smallest selector, so I just use .product (i.e. your first example). I think this also has performance advantages, since the browser only needs to find the elements marked with this single class, instead of first looking for the corresponding parent element and then checking if it has a child marked with this class, etc. .

The only reason I should generally use the other methods you are talking about is:

• I am trying to add a specific style in a specific context. For example, if I would like to highlight all internal links (in the .internal_link class), but would like them to be underlined as well, if they appear in a specific context.
• I need to add certainty to make my rule take effect.

Finally, if you assume that there will be only one element labeled with the .product class, then you are probably better off using this as an identifier rather than as a class.

Answer 4

All three selectors have different meanings and should be used in different places as needed. Performance is wise, the first should be the best, because we just need to travel the DOM once. The readability is wise also the second and third selectors seem bulky and can be difficult to extend in the future.

Answer 5

• .product
• .main .category .product
• div.main div.category div.product

Using the above selectors depends on how complex your site is.

Ref.

• If all of these elements use only one. The first selector may be suitable.

• The second way is best practice if you used this for multiple pages (for example, you have these elements for a set of products).

• The third method is not needed for me if you do not have this class name in other HTML tags, such as span ..

more tips: Mushu Tricks

Answer 6

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