Summarize some of the CSS writing experience that I have learned, listened to, watched and asked, and write efficient CSS - talk about the rendering efficiency of CSS, which is related to the rendering efficiency and the resources consumed. Part of it is written based on my own understanding. It is not ruled out that there may be errors and omissions. You are welcome to provide better opinions.
1. Hexadecimal color value pairing digits and case
When writing hexadecimal color values, you may use lowercase letters or omit them into 3 digits. There is no conclusive data to prove whether this writing method has an impact on the rendering efficiency of the browser, but the default standard for hexadecimal color values is It is an uppercase letter and a 6-digit number. Not wanting to take risks in unknown situations reduces rendering efficiency.
* Disapproved - color:#f3a;
* It is recommended to use - color:#FF33AA;
2. The difference between display and visibility
They are used to set or retrieve whether the object is displayed. Display hidden objects do not retain physical space, and visibility retains the physical space occupied by hidden objects. When the browser renders the occupied physical space, resources are consumed.
* Deprecated - visibility:hidden;
* It is recommended to use - display:none;
3. The difference between border:none; and border:0;
Similar to the relationship between display and visibility, space is not reserved and reserved respectively. More about border:0; Although the border can be hidden, it will retain the use of border-color/border-style for you.
* Disapproved - border:0;
* It is recommended to use - border:none;
4. Background images that are too small should not be tiled.
Although the file size of a background image with a width and height of 1px is very small, rendering a panel with a width and height of 500px requires repeated tiling 2500 times. Improving background image rendering efficiency is related to image size and volume. The largest image file size remains about 70KB.
* Disapproved - Tile background images below 8px in width and height
* Recommended to use - a background image of moderate size and size
5. IE filters
In addition to consuming resources, IE's filters also have compatibility issues. There is a filter that makes PNG transparent. You can avoid using this filter by making GIF or JPG appear transparent. It is recommended to only use GIF transparency in IE6, because IE7 and above already support PNG transparency.
* Disapproval, abuse of IE filters not only consumes resources but also causes compatibility issues.
* Recommended, it is best to choose other methods to avoid using filters.
6. *{margin:0; padding:0;} to avoid browser style differences
The * wildcard initializes all tags, and browser rendering consumes certain resources. Some tags are almost the same in different browsers, or some tags are no longer recommended (because you won't use it). They don't need wildcards to be re-initialized. This can save some resources.
* Deprecated, use * wildcard
* Disapproved, div span button b table and other tags should be included in wildcards to control internal and external fill styles
* It is recommended to selectively use wildcards to control the inner and outer fill styles.
7. Do not add additional tags to describe class or id
If you have a selector that uses id as the key selector, please do not add extra tag names. Because ID is unique, you should not reduce the matching efficiency for a non-existent reason.
* Deprecated - button#backButton { }
* Deprecated - .menu-left #newMenuIcon { }
* It is recommended to use - #backButton { }
* It is recommended to use - #newMenuIcon { }
8. Try to choose the most special class to store the selector
One of the biggest reasons for reducing system efficiency is that we use too many selectors in tag classes. By adding classes to elements, we can subdivide categories into classes so we don't have to waste time matching too many selectors for one tag.
* Deprecated - treeitem[mailfolder="true"] > treerow > treecell { }
* It is recommended to use - .treecell-mailfolder { }
9. Avoid descendant selectors
The descendant selector is the most resource-intensive selector in CSS. It is really very resource intensive, especially when the selector uses a label class or a general class. In many cases, what we really want is a subselector. Unless explicitly stated, the use of descendant selectors is strictly prohibited in UI CSS.
* Deprecated - treehead treerow treecell { }
* Better, but still not working (see next article) - treehead > treerow > treecell { }
10. Do not include sub-selectors in label classes
Don't use subselectors in label classes. Otherwise, each occurrence of an element will additionally increase the matching time. (Especially if the selector seems likely to be matched)
* Deprecated - treehead > treerow > treecell { }
* It is recommended to use - .treecell-header { }
11. Pay attention to the use of all sub-selectors
Use subselectors carefully. If you can think of a way not to use it, then don't use it. In particular, RDF trees and menus frequently use subselectors, like this one.
* Deprecated - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }
Remember that RDF properties can be copied in templates! Using this, we can copy the RDF attributes on the child XUL elements that we want to change based on that attribute.
* It is recommended to use - .tree-folderpane-icon[IsImapServer="true"] { }