Basics are often 5: what is the best writing order for CSS style sheet attributes?

This is my participation 8 The fourth of the yuegengwen challenge 6 God , Check out the activity details ：8 Yuegengwen challenge Already more Wen 6 God

( Basic knowledge is often 5：CSS What is the best writing order for style sheet attributes ？) I'm writing demo You don't have to consider code optimization , If you can test the effect , But in practice , In enterprise work , Performance must be improved , Optimize the code , Let customers have a high experience , So I inquired about the relevant information on the Internet ,

（1） Location attribute ：position、display、float、left、top、right、bottom、overflow、clear、z-index

（2） Self attribute ：width、height、padding、border、margin、background

（3） Writing style ：font-family、font-size、font-style、font-weight、font-varient   color

（4） Text attribute ：text-align、vertical-align、text-wrap、text-transform、text-indent、text-decoration、letter-spacing、word-spacing、white-space、text-overflow

（5）css3 New attribute in ：content、box-shadow、border-radius、transform
 Copy code 

So far , We already know the writing order , But why on earth do you write like this ？ In a word ： Its purpose is to Reduce browser reflow（ backflow ）, thus Promote browser rendering dom Performance of . Another specific analysis is ： ① analysis html structure dom Trees , analysis css structure css Trees ： take html Data structure parsed into tree , take css Data structure parsed into tree

② structure render Trees ：DOM Trees and CSS Formed after tree merging render Trees .

③ Layout render Trees ： With render Trees , The browser already knows which nodes are in those pages , Of each node css Define and and their dependencies , Then the position of each node in the screen is calculated .

④ draw render Trees ： According to the calculated rules , Draw the content on the screen through the video card .

css The style resolution to the display to browser screen occurs at ②③④ step , It can be seen that the browser is not the first to obtain css The style starts to parse immediately, but according to the css The writing order of the style is as follows dom Structure distribution of trees render style , Completion of ② Step , Then start to traverse the css Style for parsing , At this time css The traversal order of styles is exactly the same as the previous writing order .

During parsing , Once the browser finds out that the positioning of an element changes, it will affect the layout , You need to go back and re render it, as in the order of writing a book ：

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

When the browser resolves to position It is suddenly found that the element is an absolute positioning element, which needs to be separated from the document flow , But before, it was parsed according to common elements , So I had to re render , Remove this element from the document , However, due to the change of the occupation of this element , Other elements may also be rearranged by its reflow . Eventually lead to ③ Steps take too long to affect ④ Display of steps , Impact on the user experience .

therefore , Irregular attribute writing order will make the browser reflow many times during rendering , Did a lot “ No hard work ”, A reasonable style sheet can get twice the result with half the effort .

Maybe the above paragraph will be very boring for many beginners , It doesn't matter , The principle is of higher order , We just need to remember Style attributes can be in the following order

Welcome to comment