12 Tips for CSS code optimization

  Write CSS code to help improve the rendering speed of the page. In essence, the less CSS rules the engine needs to parse, the better the performance. MDN the CSS selectors into four main categories, as shown below, and the performance is lowered in descending order

1.ID rule 2.Class Rule 3. Label Rule 4. General rules on efficiency is the general understanding of the effectiveness of the Souders in 2009, published in the "High Performance website Construction Guide", although the book listed in more detail, but you can also view the full list of references, You can also see more details in Google's best practices for efficient CSS selectors. I'd like to share some of the simple examples and guidelines I used in writing high-performance CSS. These are inspired by the efficient CSS guidelines written by MDN and follow similar formats.   First, avoid excessive constraints     a general rule, do not add unnecessary constraints.     Code as follows:  //bad Ul#someid {.} menu#otherid{.}  //Good #someid {.} #otherid {.}     II, descendants The most bad selector   not only poor performance and weak code, HTML code and CSS code is seriously coupled, the HTML code structure changes, CSS also have to modify, this is how bad, especially in large companies, writing HTML and CSS is often not the same person.     Code as follows://Rotten HTML DIV tr td {.}     III, avoid chained (intersect) selector   This is similar to the case of overly restrictive, and it is wiser to simply create a new CSS class selector.   Code as follows://bad. Menu.left.icon {.}  //good. Menu-left-icon {.}     IV, adhere to the KISS principle   Imagine we have the following DOM: code like Under: <ul id= "navigator" >     <li><a href= "#" class= "Twitter" >Twitter</a></li> & nbsp   <li><a href= "#" class= "Facebook" >Facebook</a></li>     <li><a href= "#" class= "Dribble" >DRIBBBLE</A≫</li> </ul>     Below are the corresponding rules ...   code is as follows://Bad #navigator li a {.}  //Good #navigator {.} &N Bsp   Use composite (compact) syntax   Use composite syntax whenever possible.   Code as follows://bad. SomeClass { padding-top:20px;  padding-bottom:20px;  padding-left:10px;  paddi ng-right:10px;  background: #000;  background-image:url (.. /imgs/carrot.png);  background-position:bottom;  background-repeat:repeat-x;  //good. SomeClass { padding:20px 10px 20px 10px  background: #000 url (... /imgs/carrot.png) Repeat-x Bottom;     VI, avoid unnecessary namespaces       code as follows://bad. SomeClass table Tr.otherclass td.somerule {.}  //OK. SomeClass. Otherclass td.somerule {.}     Vii. Avoid unnecessary repetition   the rule of combining repetition as much as possible.     Code as follows://bad  . SomeClass { color:red;  background:blue;  font-size:15px;}  . OT Herclass { color:red;  background:blue;  font-size:15px;}  //good  . SOmeclass,. otherclass { color:red;  background:blue;  font-size:15px;}   VIII, as much as possible to simplify the rules on the basis of the above rules, you can enter One step merges the rules of repetition in different classes.   Code as follows://bad. SomeClass { color:red;  background:blue;  height:150px;  width:150px;  fo nt-size:16px; }   Otherclass { color:red;  background:blue;  height:150px;  width:150px;  font-size: 8px;  //good. SomeClass, Otherclass { color:red;  background:blue;  height:150px;  width:150px ;  . SomeClass { font-size:16px;}  . Otherclass { font-size:8px;}   Nine, avoid ambiguous naming conventions better use a name that represents semantics Word. A good CSS class name should describe what it is rather than what it looks like. Ten, avoid!importants in fact you should also be able to use other quality selector.   11, following a standard declaration order   Although there are some common ways of arranging CSS attribute order, here is a popular way I follow.   Code as follows:. someclass { /* positioning *  /* Display & Box Model/ /* Background and Typography St Yles/ /* Transitions/ /* Other/} 12, organized code format code readability and easy to maintain proportional. Here are the formatting methods I followed. The code is as follows:// Bad. Someclass-a, Someclass-b,. Someclass-c,. someclass-d {  ...}  //good .someclass-a, . SOMECLASS-B,&NB SP; .someclass-c, . someclass-d { .}  //good practice. SomeClass {    background-image:   &NBS P     Linear-gradient (#000, #ccc),         linear-gradient (#ccc, #ddd);     Box-shadow:         2px 2px 2px #000,         1px 4px 1px 1px #ddd I Nset;     Clearly, there are only a handful of rules that I've tried to follow in my own CSS, in a more efficient and maintainable spirit. If you want to read more knowledge, I suggest reading MDN to write efficient CSS and Google's optimized browser rendering guide.