1.ID rule
2.Class rule
3. Label rules
4. General rules
The general understanding of efficiency began with Steve Souders's 2009 Advanced Guide to High Performance website construction, although the book is in more detail, you can also view the full list of references here, as well as 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.
I. Avoidance of excessive restraint
A general rule, do not add unnecessary constraints.
Copy Code code as follows:
Bad
Ul#someid {..}
. menu#otherid{.}
Good
#someid {..}
#otherid {..}
Second, descendant selector is the worst
Not only is the performance low and the code is very fragile, 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.
Copy Code code as follows:
It sucks.
HTML DIV tr td {.}
Avoid chain (intersection) Selector
This is similar to the case of excessive constraints, and it is wiser to simply create a new CSS class selector.
Copy Code code as follows:
Bad
. Menu.left.icon {..}
Good
. Menu-left-icon {..}
Iv. upholding the principle of kiss
Imagine that we have the following DOM:
Copy Code code as follows:
<ul id= "Navigator" >
<li><a href= "#" class= "Twitter" >Twitter</a></li>
<li><a href= "#" class= "Facebook" >Facebook</a></li>
<li><a href= "#" class= "Dribble" >Dribbble</a></li>
</ul>
Here is the corresponding rule ...
Copy Code code as follows:
Bad
#navigator li a {.}
Good
#navigator {..}
V. Use composite (COMPACT) syntax
Use composite syntax whenever possible.
Copy Code code as follows:
Bad
. SomeClass {
padding-top:20px;
padding-bottom:20px;
padding-left:10px;
padding-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. Avoiding unnecessary namespaces
Copy Code code as follows:
Bad
. SomeClass table Tr.otherclass td.somerule {.}
Good
. SomeClass. Otherclass td.somerule {.}
Vii. avoidance of unnecessary duplication
Combine duplicate rules as much as possible.
Copy Code code as follows:
Bad
. SomeClass {
color:red;
Background:blue;
font-size:15px;
}
. otherclass {
color:red;
Background:blue;
font-size:15px;
}
Good
. SomeClass,. Otherclass {
color:red;
Background:blue;
font-size:15px;
}
Viii. streamlining of rules as far as possible
On the basis of the above rules, you can further merge the duplicate rules in different classes.
Copy Code code as follows:
Bad
. SomeClass {
color:red;
Background:blue;
height:150px;
width:150px;
font-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;
}
ix. avoidance of ambiguous naming conventions
It is best to use a name that represents semantics. A good CSS class name should describe what it is rather than what it looks like.
10. Avoid!importants
In fact, you should also be able to use other high-quality selectors.
Xi. follow a standard declaration order
While there are some common ways to arrange CSS property orders, here's a popular way I follow.
Copy Code code as follows:
. SomeClass {
* Positioning * *
/* Display & Box Model * *
/* Background and typography styles * *
* Transitions * *
/* Other * *
}
12, the organization of good code format
The readability and maintainability of the code is proportional to the ease of maintenance. Here are the formatting methods I followed.
Copy Code code as follows:
Bad
Someclass-a,. Someclass-b,. Someclass-c,. someclass-d {
...
}
Good
. Someclass-a,
. Someclass-b,
. Someclass-c,
. someclass-d {
...
}
Good practice.
. SomeClass {
Background-image:
Linear-gradient (#000, #ccc),
Linear-gradient (#ccc, #ddd);
Box-shadow:
2px 2px 2px #000,
1px 4px 1px 1px #ddd inset;
}
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.
