Rules for optimizing CSS files in the Mozilla UI

Original address:writing efficient CSS for use in the Mozilla UI

The following document describes the rules that apply to optimizing CSS files in the Mozilla UI. The first part is a general discussion of the Mozilla style system classification rules. On the basis of understanding this system, the following sections contain guidelines for writing styles that can take advantage of this style system's practices.

How the style system classifies rules

The style system divides the rules into four categories. It is important to understand these classes because they are the first thing to consider for a matching rule. The term "Master selector" is used in the following paragraphs. The primary selector is the rightmost part of the selector (the element that is ultimately to be matched, not its ancestor element). For example, in the following rules:

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

The main selector is "img", "P", and "[title]".

ID rules

The rule of the ID selector as the primary selector.

For example:

• Rules for Button#backbutton {}/* ID category * *
• Rules for #urlBar [type= "AutoComplete"] {}/* ID category * *
• Rules for TreeItem > Treerow > treecell#mycell:active {}/* ID categories * *

Class rule

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

For example:

• Button.toolbarbutton {}/* rule based on class * *
• . Fancytext {}/* rule based on class * *
• MenuItem > Menu-left[checked= "true"] {}/* based on class rules * *

TAG rules

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

For example:

• TD {}/* based on tag rules * *
• TreeItem > Treerow {}/* based on tag rules * *
• Input[type= "checkbox"] {}/* based on tag rules * *

Global rules

In addition to the above categories are grouped into this category.

For example:

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

How style systems match rules

The style system moves from the rightmost selector to the left to match a rule. The style system always matches the selector to the left until the rule is matched or the match stops because of an error.

The first step in the rule classification occurs on the basis of the primary selector category. The purpose of this classification is to filter out rules that do not need to waste time matching. This is the key to significantly improving performance. The less the rule, the faster the rendering of the style for a given element that needs to match. For example, an element has an ID, and only the ID rules that match the element ID are retrieved. Only class rules that match the class of the element are retrieved. Only tag rules that match tag will be retrieved. Global rules are always retrieved.

Efficient CSS Guide

Avoid global rules

Ensure that rules do not end with global classification

Do not assign a label name or class to the ID classification rule

If you have a style rule that takes the ID selector as the primary selector, don't add the tag name again. IDs are unique, so adding tag names needlessly slows the matching process. (The exception is when different elements use the same class name, and you need to dynamically change the class name of one of the elements to apply different styles for different situations.) )

• Bad–button#backbutton {}
• Bad–.menu-left#newmenuicon {}
• good– #backButton {}
• good– #newMenuIcon {}

Do not specify the label signature for class classification rules

Like the rules above, all class names are unique. The consonant of tags and class names is a convention (however, if the design changes make it necessary to change the label there is a problem of flexibility, because it is also necessary to change the class-the best choice of a strict semantic name, this flexibility is also one of the goals of the separation style sheet).

• bad–treecell.indented {}
• good–.treecell-indented {}
• Best–.hierarchy-deep {}

Try to apply the rules to the most explicit classes.

One of the biggest reasons for slowing down a system is that there are too many tag sorting rules. By adding class names to the elements, you can classify the rules in these tag classes into class categories so that you don't have to waste time trying to match so many rules to a tag.

• Bad–treeitem[mailfolder= "true"] > Treerow > Treecell {}
• Good–.treecell-mailfolder {}

Avoid descendant selectors

In CSS, descendant selectors (descendant)^{[Note 1]} have a high consumption of energy, especially the rule of selectors in tag or global classification. Sub-selectors (child selector) are often really needed. If there is no explicit permission from the subject module owner, the descendant selector is prohibited in UI CSS.

• Bad–treehead treerow Treecell {}
• BETTER, BUT still bad (next guideline) –treehead > Treerow > Treecell {}

It is best not to include descendant selectors in the Tag class rule

Avoid using descendant selectors with the tag class rule. This can significantly increase the match time (especially if these rules are matched multiple times).

• Bad–treehead > Treerow > Treecell {}
• Best–.treecell-header {}

Be careful with the use of the child selector

Be careful with the descendant selector. If there is another way to do this, do not use a child selector. In particular, the child selectors are heavily used in RDF trees and similar menus.

• bad–treeitem[Isimapserver= "true"] > Treerow >. Tree-folderpane-icon {}

Be aware that the properties from RDF in the template can be replicated! You can use this to copy the RDF attribute to a child element that needs to change that attribute.

• good–.tree-folderpane-icon[Isimapserver= "true"] {}

Reliance on inheritance

Understand and use the attributes that you can inherit. XUL widgetry^{[Note 2]} has been explicitly set so that list-style-image or font rules can be applied to the parent label, which penetrates into anonymous content. So there's no need to waste time writing rules for those anonymous content.

• bad– #bookmarkMenuItem > Menu-left {list-style-image:url (blah);}
• good– #bookmarkMenuItem {list-style-image:url (blah);}

In the example above, the need for styling anonymous content (without understanding that list-style-image can inherit) leads to a class class rule. In fact, this rule should belong to the most explicit class of-id rules.

Keep in mind, especially those anonymous content, that they all have the same class. The bad example above results in the need to check whether the icon for each menu is included in the bookmarks item. This is very scary and expensive to consume (there are many menus); This rule should not be checked by any other menu except the Bookmarks menu.

Using-moz-image-region

Put a bunch of pictures in a separate picture file and use -moz-image-region^{[Note 3]} to check for significant performance improvements. ()

Note 1: The descendant selector (descendant selector) sub-selector (child selector) is distinguished. Literally, descendant selectors, as the name suggests, include all descendants of sons, grandchildren, and grandchildren; The child selector just refers to the son, regardless of the grandchildren.

Note 2:xul Widgetry is not clear what.

Note 3: Looks like the idea and now says the CSS sprites method is similar, want to know this is ten years ago (2000) article Ah. -Sugar with tomatoes