Translated from: http://blog.jobbole.com/55067/
Writing good CSS code will help to improve the rendering speed of the page. Essentially, the fewer CSS rules the engine needs to parse, the better the performance. The MDN classifies CSS selectors into four main categories, as shown below, with performance decreasing in turn.
- ID rule
- Class rules
- Label rules
- General rules
The general understanding of efficiency begins with the advanced Guide to high-performance Web construction, published by Steve Souders in 2009, although the list is more detailed, but you can also check out the full citation lists here, or see more details in Google's best practices for efficient CSS selectors.
In this article I would like to share some simple examples and guidelines that I have used to write high-performance CSS. These are inspired by an efficient CSS guide written by MDN and follow a similar format.
Avoid over-restraint
A general rule, do not add unnecessary constraints.
1234567 |
// 糟糕 ul#someid {..} .menu#otherid{..} // 好的 #someid {..} #otherid {..} |
The descendant selector sucks.
Not only is the performance low and the code very fragile, the HTML code and CSS code are badly coupled, the HTML code structure changes, the CSS has to be modified, which is how bad, especially in large companies, writing HTML and CSS is often not the same person.
12 |
// 烂透了 html div tr td {..} |
Avoid chaining (intersection) selectors
This is similar to overly restrictive situations, and it is wiser to simply create a new CSS class selector.
12345 |
// 糟糕 .menu. left . icon {..} // 好的 .menu-left- icon {..} |
Stick to the KISS principle
Imagine that we have the following DOM:
12345 |
<
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 are the corresponding rules ...
12345 |
// 糟糕 #navigator li a {..} // 好的 #navigator {..} |
Using composite (Compact) syntax
Use compound syntax whenever possible.
1234567891011121314151617 |
// 糟糕
.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
;
}
// 好的
.someclass {
padding
:
20px 10px 20px 10px
;
background
:
#000 url
(../imgs/carrot.png)
repeat-x bottom
;
}
|
Avoid unnecessary namespaces
12345 |
// 糟糕 .someclass table tr.otherclass td.somerule {..} //好的 .someclass .otherclass td.somerule {..} |
Avoid unnecessary duplication
Combine the repeating rules as much as possible.
123456789101112131415161718192021 |
// 糟糕
.someclass {
color
:
red
;
background
:
blue
;
font-size
:
15px
;
}
.otherclass {
color
:
red
;
background
:
blue
;
font-size
:
15px
;
}
// 好的
.someclass, .otherclass {
color
:
red
;
background
:
blue
;
font-size
:
15px
;
}
|
Streamline rules as much as possible
Based on the above rules, you can further merge the repeating rules in different classes.
1234567891011121314151617181920212223242526272829303132 |
// 糟糕
.someclass {
color
:
red
;
background
:
blue
;
height
:
150px
;
width
:
150px
;
font-size
:
16px
;
}
.otherclass {
color
:
red
;
background
:
blue
;
height
:
150px
;
width
:
150px
;
font-size
:
8px
;
}
// 好的
.someclass, .otherclass {
color
:
red
;
background
:
blue
;
height
:
150px
;
width
:
150px
;
}
.someclass {
font-size
:
16px
;
}
.otherclass {
font-size
:
8px
;
}
|
Avoid ambiguous naming conventions
It is best to use a name that represents semantics. A good CSS class name should describe what it is and not what it looks like.
Avoid!importants
In fact, you should also be able to use other high-quality selectors.
Follow a standard declaration order
While there are some common ways of arranging CSS property order, here's a popular way I follow.
1234567 |
.someclass { /* Positioning */ /* Display & Box Model */ /* Background and typography styles */ /* Transitions */ /* Other */ } |
Well-organized code formats
The readability of the code is proportional to the maintainability and ease of maintenance. Here are the formatting methods I followed.
12345678910111213141516171819202122 |
// 糟糕
.someclass-a, .someclass-b, .someclass-c, .someclass-d {
...
}
// 好的
.someclass-a,
.someclass-b,
.someclass-c,
.someclass-d {
...
}
// 好的做法
.someclass {
background-image
:
linear-gradient(
#000
,
#ccc
),
linear-gradient(
#ccc
,
#ddd
);
box-shadow:
2px 2px 2px #000
,
1px 4px 1px 1px #ddd inset
;
}
|
Obviously, here are just a few rules that I try to follow in my own CSS, in a more efficient and maintainable nature. If you want to read more knowledge, I recommend reading MDN on the authoring efficient CSS and Google's optimized browser rendering guide.
"Go" to write better CSS code