We have listed more than 10 related knowledge and attention points, we can systematically explore, let us write the Web page open more smoothly.
Please don't tell me, you can't read e-text, you just don't want to see!!!
1. How the style system breaks up rules
The style system breaks rules up into four primary categories. It is critical to understand these categories, as they are the "a", defense as far as rule matching. I use the term key selector to the paragraphs that follow. The key selector is defined to being the rightmost occurrence of an ID selector, a class selector, or a tag selector.
1.1, ID Rules
The category consists of those rules that have a ID selector as their key selector.
Button#backbutton {}/* This is a id-categorized rule * *
#urlBar [type= "AutoComplete"] {} * * This is a id-categorized rule * *
TreeItem > Treerow > treecell#mycell:active {}/* This is a id-categorized rule * *
1.2. Class Rules
If a rule has a class specified as its key selector, then it falls to this category.
Button.toolbarbutton {}/* A class-based Rule * *
. Fancytext {}/* A class-based Rule * *
MenuItem > Menu-left[checked= "true"] {}/* A class-based Rule * *
1.3. Tag Rules
If no class or ID is specified as the key selector, then the next potential category for the "a" is the tag category. If A rule is has a tag specified as its key selector, then the rule falls to this category.
TD {}/* A tag-based Rule * *
TreeItem > Treerow {}/* A tag-based Rule * *
Input[type= "checkbox"] {}/* A tag-based Rule * *
1.4. Universal Rules
All other rules fall to this category.
: Table {}/* A Universal Rule * *
[hidden= "true"] {}/* A Universal Rule * *
* {}/* A Universal Rule * *
Tree > [collapsed= "true"] {}/* A Universal Rule * *
2. How the Style System matches Rules
The style system matches a rule by starting with the rightmost selector and moving to the left through the rule ' s selector S. As long as your little subtree continues to check out, the style system would continue moving to the left until it eithe R matches the "rule" or bails out because of a mismatch.
Your first line of defense is the rule filtering that occurs based on the type of the key selector. the purpose of this categorization is to filter out rules so that you don ' t even have to waste time trying to match them. This is the key to dramatically increasing performance. the fewer rules that you even have to check for a given element, the faster style resolution will be. as an example, if your element has an id, then only id rules that match your element ' S id will be checked. only class rules for a class foUnd on your element will be checked. only tag rules that match your tag will be checked. universal rules will always be checked.
3, guidelines for efficient CSS
3.1, avoid universal rules!
Make sure a rule doesn ' t the Universal category!
3.2. Don ' t qualify id-categorized rules with tag names or classes
If you are have a style rule this has a ID selector as its key selector, don ' t bother also the ' tag ' of the ' adding '. IDs are unique, so your ' re slowing down the matching for no real reason.
Copy Code code as follows:
Bad-button#backbutton {}
Bad-. Menu-left#newmenuicon {}
good-#backButton {}
good-#newMenuIcon {}
3.3. Don ' t qualify class-categorized rules with tag names
Similar to the "rule above", all of our classes would be unique. The convention you should the ' to include ' tag name in the class name.
Copy Code code as follows:
bad-treecell.indented {}
Good-. treecell-indented {}
3.4. Try to put the rules into the most specific category for you can!
The single biggest cause of slowdown into our system are that we have too many rules in the tag category. By adding classes to our elements, we can further subdivide this rules into class categories, and then we longer waste Time trying to match as many the rules for a given tag.
Bad-treeitem[mailfolder= "true"] > Treerow > Treecell {}
Good-. Treecell-mailfolder {}
3.5, 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 are in the "tag" or universal category. Frequently what is really desired are the child selector. The use of the descendant selector are banned in UI CSS without the explicit approval of your ' s module owner.
Bad-treehead treerow Treecell {}
BETTER, BUT still bad (check next guideline)-treehead > Treerow > Treecell {}
3.6, tag-categorized rules should never contain a child selector!
Avoid using the child selector with tag-categorized rules. You'll dramatically increase the matching time (especially if the ' rule ' likely to be matched-more often-not) for All occurrences of this element.
Bad-treehead > Treerow > Treecell {}
Best-. Treecell-header {}
3.7. Question all usages of the selector!
Be careful about using the child selector. If you can come up and a way to avoid have to use it In particular, the child selector are frequently used with RDF trees and menus.
Bad-treeitem[isimapserver= "true"] > Treerow >. Tree-folderpane-icon {}
Remember that attributes from RDF can is duplicated in a template! Take advantage of this fact to duplicate RDF properties on child XUL elements that wish to change based off .
Good-. Tree-folderpane-icon[isimapserver= ' true '] {}
3.8, Rely on inheritance!
Learn which properties inherit, and allow them to do so! We have explicitly set up XUL widgetry so, can put list-style-image (just one example) or font rules on the parent tag, and it'll filter in to the anonymous content. You are don ' t have to waste time writing a rule this 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) Res Ulted in A is the class category, when this is really should have ended up being in the most specific Gory of all, the ID category.
Remember, especially with anonymous content, which they all have the same classes! The bad rule above causes the icon of every menu to being checked to the if it's contained in the Bookmarks menu item. This is hideously expensive (since there are many); This is the rule never should have even been the checked menu.
3.9, use-moz-image-region!
Putting a bunch of images into a single image file and selecting them With-moz-image-region performs significantly than putting each image to its own file.
Original Document Information-author:david Hyatt
