CSS styles and writing order?
Style and writing order? With such a simple style, isn't it just a matter of just writing it? Many beginners and even people with certain work experience will ask this question. Does the writing order of styles have any effect on the page? The answer is yes. How to write a good css style is also what an excellent developer must know! And it should form a habit and integrate it into the development! A good habit is not formed at a time.
Why pay attention to the writing order?
Reduce browser reflow (reflow) and improve the performance of browser rendering dom
Browser rendering principle
①: Parse html to build a dom tree, parse css to build a css tree: parse html into a tree-shaped data structure, and parse css into a tree-shaped data structure
②: Build a render tree: a render tree formed by merging the DOM tree and the CSS tree.
③: Layout the render tree: With the render tree, the browser already knows which nodes are in those web pages, the CSS definition of each node and their affiliation, so as to calculate the position of each node on the screen.
④: Draw the render tree: According to the calculated rules, draw the content on the screen through the graphics card.
The css style is parsed and displayed on the browser screen, which happens in steps ②③④. It can be seen that the browser does not start parsing the css style immediately after getting it, but distributes the render style according to the structure of the dom tree according to the writing order of the css style. Step 2, then start to traverse the CSS style of each tree node for parsing. At this time, the traversal order of the CSS style is completely in accordance with the previous writing order.
How does the writing order of styles affect web pages?
For example the following code:
When the browser parses to display, it suddenly finds that the element is a block-level element, and it was rendered as an inline element before! At this time, I have to go back and re-render, and parse the span tag according to the block-level element. The correct way is to write display at the top of the style, and render the span tag as a block-level element at the beginning.
Let's look at another example:
When this example is parsed to position, it is suddenly found that the element is an absolutely positioned element that needs to be separated from the document flow, but it was parsed according to ordinary elements before, so it has to be re-rendered, and absolute positioning is positioned according to the positioned parent element. , if the size of the parent element is different, there will be a result that the size of the .box will be re-changed, causing the page to flash. The positioning is out of the document flow, and it may affect the arrangement and layout of other elements after floating.
It is a waste of performance to have to render twice if you can pass it once. A large number of redrawing pages will cause the page to flicker and affect the user experience~
What is the recommended writing order?
In what order should we write styles?
(1) Positioning attributes:
(2) Own attributes:
(3) Text style:
(4) Text attributes:
(5) New properties in css3:
more subdivided
I will share so much today. If you like it, I will update it again. Small partners who are learning WEB front-end technology can join the group (618522268) to communicate and learn together. There are also a lot of learning materials in the group for you to download and see by yourself. Welcome everyone. Get up and discuss. .