CSS Performance Question

Question

I was wondering what the experts do when it comes to writing CSS code. Is it bad to use the tagname.className style? Does inheritance cause a noticeable performance loss? Do

Answer 1

The documentation for Google's Page Speed has a section about using efficient CSS selectors. It mentions how descendant selectors are inefficient because once the rightmost selector has been matched "the browser must [also] traverse up the DOM tree, evaluating every ancestor element until it finds a match or reaches the root element." Mozilla even says "the descendant selector is the most expensive selector in CSS." So div.photo-column{...} would be preferable to div.result-row div.photo-column{...}.

It also mentions that you should remove redundant qualifiers such as "class selectors qualified by tag selectors (when a class is only used for one tag, which is a good design practice anyway)." That makes sense because if you have div.photo-column{...} instead of .photo-column{...} the browser has to make two checks, one to check for class="photo-column" and, if that's true, one to check if the element is a div, rather than just checking for the class, if that's all you specify.