怎样写出更有效率的CSS

现在的位置: 首页 > Web设计> 正文

上篇下篇

怎样写出更有效率的CSS

2013年08月15日 ⁄ Web设计 ⁄ 暂无评论 ⁄ 被围观 3,604+

在页面设计的过程中，总会使用CSS来进行样式设计，样式的选择器也无非常用4种，ID，Class，Tag和Universal，优先级从高到底，那么怎么样设计选择器和样式，可以提高CSS的解析效率，平时的设计中又会出现哪些误区，那么如下的文章值得一看。

Writing good CSS code can speed up page rendering. Essentially, the fewer rules the engine has to evaluate the better. MDN groups CSS selectors in four primary categories, and these actually follow the order of how efficient they are:

ID Rules
Class Rules
Tag Rules
Universal Rules

The efficiency is generally quote from Even Faster Websites by Steve Souders which was published in 2009. Souders list is more detailed, though, and you can find the full list referenced here. You can find more details in Google’s best practices for efficient CSS selectors.

In this article I wanted to share some simple examples and guidelines that I use for writing efficient and performant CSS. This is inspired by, and follows a similar format to, MDN’s guide to writing efficient CSS.

Don’t Overqualify[过多的修饰符]

As a general rule, don’t supply more information than is necessary.

// bad
ul#someid {..}
.menu#otherid{..}
 
// good
#someid {..}
#otherid {..}

// bad
ul#someid {..}
.menu#otherid{..}

// good
#someid {..}
#otherid {..}

Descendant Selectors are the Worst[少用后代选择器]

Not only is this not performant but it is fragile, as changes to the HTML can easily break your CSS.

1 2	// very bad html div tr td {..}

// very bad
html div tr td {..}

Avoid Chaining[少用链式]

This is similar to overqualifying and it is preferable to simply create a new CSS class selector.

// bad
.menu.left.icon {..}
 
// good
.menu-left-icon {..}

// bad
.menu.left.icon {..}

// good
.menu-left-icon {..}

Stay KISS[简洁]

Let’s imagine we have a DOM like this:

<ul id="navigator">
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Dribbble</a></li>
</ul>

<ul id="navigator">
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Dribbble</a></li>
</ul>

Following upon the prior rules…

// bad
#navigator li a {..}
 
// good
#navigator {..}

// bad
#navigator li a {..}

// good
#navigator {..}

Use a Compact Syntax[采用缩写]

Whenever possible, use the shorthand syntax.

// 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;
}

// 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;
}

Avoid Needless Namespacing[多余的命名空间]

// bad
.someclass table tr.otherclass td.somerule {..}
 
//good
.someclass .otherclass td.somerule {..}

// bad
.someclass table tr.otherclass td.somerule {..}

//good
.someclass .otherclass td.somerule {..}

Avoid Needless Duplication[规则重复]

Whenever you can, combine duplicate rules.

// 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;
}

// 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;
}

Condense Rules When You Can[继承压缩]

Following on the prior rule, you can combine duplicate rules but still differentiate classes.

// 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;
}

// 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;
}

Avoid Unclear Naming Conventions[命名规范]

It is preferable to use semantic names. A good CSS class name should describe what it is about.

Avoid !importants[避免!importants标签的使用]

When possible, you should instead use good qualified selectors.

Follow a Standard Declaration Order[标准顺序]

While there are a number of common ways to order CSS properties, this is a commonly used one that I follow.

.someclass {
 /* Positioning */
 /* Display & Box Model */
 /* Background and typography styles */
 /* Transitions */
 /* Other */
}

.someclass {
 /* Positioning */
 /* Display & Box Model */
 /* Background and typography styles */
 /* Transitions */
 /* Other */
}

Format Your Code Properly[格式化]

Code that is easier to read is easier to maintain. Here’s the format I follow:

// 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;
}

// 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;
}

Where to Go From Here

Obviously these are just a handful of rules that I try to follow in my own CSS to make it both more efficient and easier to maintain. If you want to read more on the topic, I suggest reading Writing Efficient CSS on MDN and Google’s guide to optimize browser rendering.

文章节选：writing performant and quality css