I haven't changed the article for a long time, and the blog is going to be abandoned. I'm ashamed to say that I just sorted out the style sheet I wrote earlier this time. Let's talk about the writing order of the attributes in the CSS style sheet.

Like many beginners, birds are very Buddhist at the beginning of writing style sheets. They write whatever they think of in the style, without rules. In fact, this is not only bad for viewing and maintenance, but more importantly, the chaotic writing order of CSS attributes will affect the loading and rendering of web pages and slow down page loading.

In other words, a standard CSS attribute writing attribute is also a part of web page optimization, which deserves the attention of every front-end enthusiast.

What kind of writing order is reasonable? After consulting the data, the birds get the following order

(1) Location attributes: position, display, float, left, top, right, bottom, overflow, clear, z-index

(2) Self attributes: width, height, padding, border, margin, background

(3) Text style: font family, font size, font style, font weight, font variant color

(4) Text attributes: text align, vertical align, text wrap, text transform, text independent, text decoration, letter spacing, word spacing, white space, text overflow

(5) New attributes in css3: content, box shadow, border radius, transform

When writing styles, it is recommended to write styles in the order of 1-5.

So why write like this? Its purpose is to reduce browser reflow, thus improving the performance of browser rendering dom

Principle: browser rendering process

① Parse html to build a dom tree, parse css to build a css tree: parse html into a tree like data structure, and parse css into a tree like data structure

② Build render tree: the render tree formed after the combination of DOM tree and CSS tree.

③ Layout render tree: With the render tree, the browser already knows which nodes are in those pages, the css definitions of each node and their dependencies, so as to calculate the position of each node in the screen.

④ Draw render tree: according to the calculated rules, draw the content on the screen through the graphics card.

The resolution of css style to display on the browser screen takes place in step ② ③ ④. It can be seen that the browser does not immediately start parsing the css style as soon as it gets it, but distributes the render style according to the writing order of css style according to the structure of the dom tree, completes step ②, and then starts to traverse the css style of each tree node for parsing, At this time, the traversal order of the css style is exactly the same as the previous writing order. In the parsing process, once the browser finds that the positioning change of an element affects the layout, it needs to go back and re render it, just as in the following writing order:

 width: 100px; height: 100px; background-color: red ; position: absolute;

When the browser parses to position, it suddenly finds that the element is absolutely positioned and needs to be separated from the document stream, but it was previously parsed as an ordinary element, so it has to be re rendered to remove the position of the element in the document. However, due to the change of the position of the element, other elements may also be rearranged due to the influence of its reflow. Finally, the time spent in step ③ is too long, which affects the display of step ④ and the user experience.

Therefore, the non-standard attribute writing order will make the browser repeatedly reflow in the rendering process and do a lot of "useless work", while a reasonable set of style sheets is twice the result with half the effort.

Maybe many beginners will find the above section particularly boring, which doesn't matter. The principle is relatively advanced, and birds are also novices. We just need to remember that the style attributes are in the following order

Positioning attribute>Self attribute>Text style>Text attribute>New attribute of CSS3

Part of this article is extracted from CSDN