Search code examples
htmlcssperformancemozilla

Writing Efficient CSS

Ok so in another question something was being discussed, and this link was mentioned:

https://developer.mozilla.org/en/Writing_Efficient_CSS

In that article, they say some things I didn't know, but before I ask about them, I should ask this... Does that apply to CSS interpreted by Firefox? Forgive my noobness, but I wasn't sure what they meant by Mozilla UI. (don't hurt me!)

If it does apply, when they say:

Avoid the descendant selector!

The descendant selector is the most expensive selector in CSS. It is dreadfully expensive, especially if a rule using the selector is in the tag or universal category. Frequently what is really desired is the child selector. The use of the descendant selector is banned in UI CSS without the explicit approval of your skin's module owner.

* BAD - treehead treerow treecell { }
* BETTER, BUT STILL BAD (see next guideline) - treehead > treerow > treecell { }

The descendant selector is just a space? And then what would the difference be between child and descendant? Child is an element inside another, but isn't that the same as descendant? As I'm writing I think I might have figured it out. A descendant could be a child/grandchild/great-grandchild/etc? And child is only one deep?

Sorry again for the stupid level of my question... just wondering, because I have been constantly using descendants in my CSS for my site. But yeah, if this isn't about Firefox then this whole question is pointless...

If its not about Firefox, does anyone have a link to an article explaining efficiency for Firefox or Browsers in general?

Solution

  • First of all - the suggestions in this article are not for html pages - they are specifically for the Mozilla UI - XUL, so it may be best practice for XUL, but not for html.

    Applying the CSS on an average HTML page is one of the quickest things than happen while loading the page.
    Also, the article may suggest the fastest way to apply css rules, but at what cost? For example, they suggest not having more than one class per rule:

    BAD - .treecell.indented { }
    GOOD - .treecell-indented { }

    That is almost outrageous. It may lead to quicker CSS, but who cares? Assuming you already have .treecell and .indented, following these suggestions leads to complicated logic, harder maintenance, duplicated css rules, harder JavaScript (which costs a lot more that CSS), etc.
    They suggest not using the full richness of CSS selectors and replacing these selectors with flat classes, which is a shame.