Writing highly efficient CSS in Mozilla UI

Original article: Writing Efficient CSS for use in the Mozilla UI
High-efficiency CSS writing in Mozilla UI

The following documents describe the rules for the application to optimize CSS files in Mozilla UI. The first part is a general discussion of Mozilla style system classification rules. On the basis of understanding this system, the subsequent sections will contain some guides for writing styles that can take advantage of this style system practice.

How to classify rules in the style System

Style systems classify rules into four categories. Understanding these classes is very important, because they should be considered first for rule matching. The "main selector" is used in subsequent paragraphs. The primary selector refers to the rightmost part of the selector (the final element to be matched, rather than its ancestor element ). For example, in the following rules:

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

The primary selector is "img", "p", and "[title]".

ID rule

The rule that uses the ID selector as the primary selector.

For example:

• Button # backButton {}/* ID type rule */
• # UrlBar [type = "autocomplete"] {}/* ID category Rules */
• Treeitem> treerow> treecell # myCell: active {}/* ID category Rule */

Class rules

If a rule has a specified class as the primary selector, it will be 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 an ID or class, the next class is probably a tag classification. If a rule specifies a tag as the primary selector, it is classified as this type.

For example:

• Td {}/* tag-based rules */
• Treeitem> treerow {}/* tag-based rules */
• Input [type = "checkbox"] {}/ * tag-based rules */

Global rules

All of the above categories are classified into this category.

For example:

• [Hidden = "true"] {}/* Global rule */
• * {}/* Global rule */
• Tree> [collapsed = "true"] {}/ * Global rule */

How does the style system match rules?

The style system moves from the rightmost selector to the left to match a rule. The style system always matches the selected character on the left until the rule is matched or the matching is stopped due to an error.

The first step of Rule classification is based on the primary selector category. This classification aims to filter out rules that do not waste time matching. This is the key to significantly improve performance. For a given element that needs to be matched, the fewer rules, the faster the style rendering. For example, if an element has an ID, only the ID rules that match the element ID will be retrieved. Only the class rules that match the element's class will be retrieved. Only tag rules that match the tag are retrieved. Global rules are always retrieved.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page