CSS style Writing order

CSS styles and writing order?

Style and writing order? The style of such simple things, not just write it on the line. Many beginners, even those with a certain amount of work experience, will issue this question. And how does the writing order of the style affect the page? The answer is yes. How to write a good CSS style is also an excellent developer must know! And should get into the habit of integration into the development! A good habit is not a little formed.

Why pay attention to the order of writing?

Reduce browser reflow (reflow), improve browser rendering DOM performance

Browser Rendering principle

①: Parsing HTML to build a DOM tree, parsing CSS to build a CSS tree: parsing html into a tree-like data structure, parsing CSS into a tree-shaped structure

②: Constructs a render tree: The render tree that is formed after the DOM tree and the CSS tree are merged.

③: Layout render tree: With the render tree, the browser already knows which nodes are in those pages, the CSS definitions for each node, and their dependencies, thus calculating the position of each node in the screen.

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

CSS style parsing to display to the browser screen occurs in the ②③④ step, the browser is not a get to the CSS style immediately began to parse, but according to the CSS style of writing in accordance with the structure of the DOM tree to distribute the render style, complete step ②, The CSS style of each tree node is then parsed, and the CSS style is traversed in the order in which it was written.

How does the writing order of the styles affect the page?

For example, the following code:

When the browser resolves to display, it suddenly discovers that the element is a block-level element, which was previously rendered as inline elements! This time had to be re-rendered, parsing the span tag according to block-level elements. The correct approach is that display is written at the front of the style, and the span tag is rendered as a block-level element at the outset.

Let's look at an example:

When this example resolves to position, it is suddenly found that the element is absolutely positioned to be out of the document flow, but before it is parsed according to ordinary elements, so it has to be re-rendered, and absolute positioning is based on the parent element that has been positioned, if the parent element is not the same size, will appear. Box size will re-change the result so that the page flashes. Positioning is also out of the document flow, and may affect other element arrangement layouts after floating.

Once can be rendered two times is a waste of performance, a large number of redrawing the page will lead to a flash of the page, affecting the user experience ~

What is the recommended writing order?

In what order should we write the style?

(1) Positioning properties:

(2) Self-properties:

(3) Text style:

(4) Text properties:

(5) New properties in CSS3:

More subdivision

Today to share so much, if you like, I will update, is learning the Web front-end technology of small partners can enter the group (618522268) to Exchange learning together, the group also has a large number of learning materials for you to download the see, Welcome to share the discussion together.

CSS style Writing order