Avoid Universal Rules!
Make sure a rule doesn't end up in the universal category!
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 { }
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 { }
Tag-categorized rules should never contain a child selector!
Avoid using the child selector with tag-categorized rules. You will dramatically increase the matching time (especially if the rule is likely to be matched more often than not) for all occurrences of that element.
* BAD - treehead > treerow > treecell { }
* BEST - .treecell-header { }
Question all usages of the child selector!
Be careful about using the child selector. If you can come up with a way to avoid having to use it, do so. In particular, the child selector is frequently used with RDF trees and menus like so.
* BAD - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }
Remember that attributes from RDF can be duplicated in a template! Take advantage of this fact to duplicate RDF properties on child XUL elements that wish to change based off that attribute.
* GOOD - .tree-folderpane-icon[IsImapServer="true"] { }
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); }
In the above example, the desire to style the anonymous content (without understanding that list-style-image inherits) resulted in a rule that was in the class category, when this rule really should have ended up being in the most specific category of all, the ID category.
Remember, especially with anonymous content, that they all have the same classes! The bad rule above causes the icon of every menu to be checked to see if it is contained in the bookmarks menu item. This is hideously expensive (since there are many menus); this rule never should have even been checked by any menu other than the bookmarks menu.
Code: Select all
More Details : https://developer.mozilla.org/en/Writing_Efficient_CSS
