Writing Efficient CSS - MDC

Writing Efficient CSS - MDC
Avoid Universal Rules!
Don't qualify ID-categorized rules with tag names or classes
If you have a style rule that has an ID selector as its key selector, don't bother also adding the tag name to the rule. IDs are unique, so you're slowing down the matching for no real reason.

    * BAD - button#backButton { }
    * BAD - .menu-left#newMenuIcon { }
    * GOOD - #backButton { }
    * GOOD - #newMenuIcon { } 

Don't qualify class-categorized rules with tag names

Similar to the rule above, all of our classes will be unique. The convention you should use is to include the tag name in the class name.

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

Try to put rules into the most specific category you can!
The single biggest cause of slowdown in our system is that we have too many rules in the tag category. By adding classes to our elements, we can further subdivide these rules into class categories, and then we no longer waste time trying to match as many rules for a given tag.

    * BAD - treeitem[mailfolder="true"] > treerow > treecell { }
    * GOOD - .treecell-mailfolder { } 

Rely on inheritance!
Learn which properties inherit, and allow them to do so! We have explicitly set up XUL widgetry so that you can put list-style-image (just one example) or font rules on the parent tag, and it will filter in to the anonymous content. You don't have to waste time writing a rule that talks directly to the anonymous content.

    * BAD - #bookmarkMenuItem > .menu-left { list-style-image: url(blah); }
    * GOOD - #bookmarkMenuItem { list-style-image: url(blah); }