Writing efficient CSS in Mozilla UI

The following document describes the rules that apply to optimize CSS files in Mozilla UI. The first part is a general discussion of the Mozilla style system classification rules. Based on this understanding of the system, the following sections contain guidelines for writing styles that take advantage of the practical benefits of this style system.

How style systems classify rules

The style system divides rules into four broad categories. It is important to understand these classes because they are the first to be considered for rule matching. The term "primary selector" will be used in the following paragraphs. The primary selector refers to the rightmost part of the selector (the element to be matched, not its ancestors). For example, in the following rule:

a img, div > p, h1 + [title] {}

The primary selectors are "img", "p", and "[title]".

ID rules

Rules that use the ID selector as the primary selector.

For example:

• button#backButton { } /* Rules for ID categories*/
• #urlBar[type="autocomplete"] { } /* Rules for ID categories*/
• treeitem > treerow > treecell#myCell:active { } /* Rules for ID categories*/

Class rules

If a rule has a specified class as the primary selector, it is classified into this class.

For example:

• button.toolbarButton { } /* class-based rules*/
• .fancyText { } /* class-based rules*/
• menuitem > .menu-left[checked="true"] { } /* class-based rules*/

Tag rules

If the primary selector is not ID or class, then the next class is likely to be the tag category. If a rule specifies tag as the main selector, it is classified into this category.

For example:

• td { } /* Tag-based rules*/
• treeitem > treerow { } /* tag-based rules*/
• input[type="checkbox"] { } /* tag-based rules*/

global rules

In addition to the above categories, everything falls into this category.

For example:

• [hidden="true"] { } /* Global rules*/
• *{} /* Global rules*/
• tree > [collapsed="true"] { } /* Global rules*/

How the style system matches rules

The style system starts with the rightmost selector and moves to the left to match a rule. The style system will keep matching selectors to the left until the rule is matched or the matching is stopped due to an error.

The first step in classifying rules occurs based on the primary selector category. The purpose of this classification is to filter out those rules that do not require time-consuming matching. This is the focus of significant performance improvements. The fewer rules that need to be matched for a given element, the faster the style will render. For example, if an element has an ID, then only ID rules matching the element ID will be retrieved. Only class rules matching the element's class will be retrieved. Only tag rules matching the tag will be retrieved. Global rules are always retrieved.