AI专业者开发社区 1 号成员
  •  0 回帖  •  9 浏览  •  4 个月前
   

前端代码标准最佳实践：CSS篇

上一篇《前端代码标准最佳实践：javascript》发表后，大家讨论还是很热烈，从侧面体现了前端工程师对写标准的前端代码的重视程度很高。这些最佳标准实践并不是那个权威组织发布的，而是由大量的前端工程师们在实践过程中的经验总结，目的在于提高代码的可读性，可维护性和性能。那么接着上一篇，我们再来谈谈 CSS 代码的一些标准实践。

1，命名

和其他语言规范一样，css 的命名也讲究命名要有意义，命名要尽可能短但是要足够表达含义；命名的词用连字符连接。

不规范的命名：

?
1
2
3
4
5
6
#navigation{
}
.demoimage{
}
.error_status{
}

规范的命名：

?
1
2
3
4
5
6
#nav{
}
.demo-image{
}
.error-status{
}

2, css 选择器

不同的标签类型尽可能不用相同的 css 类名；尽可能不用标签类型选择器，用 css 类名和 ID 足够定义 css，因为 ID 是可以唯一确定 Dom 元素的，而 css 类是不推荐用于不同的标签的；另外应该少用 ID 选择器定义，因为 ID 的唯一性使得定义的 css 无法重用。

不规范定义：

?
1
2
3
4
ul#menus{
}
div.info{
}

规范定义：

 

?
1
2
3
4
.main-menus{
}
.info{
}

3，属性名称和值的定义精简

css 的某些属性定义可以可以分拆为各个独立项，比如 padding，border, margin, background, font 等，虽然分拆定义的可读性会好一些，但是就目前的经验来看，前端工程师们对这些常用的 css 理解程度足够好，合并后的定义不会对可读性带来影响，反而代码更简洁；此外对属性值为 0 的单位可以省略，在 0 后面添加入 px em cm 等单位是毫无意义的；对小数值可以省略小数点前的 0；url 值两端的引号可以省略。

不规范的定义：

?
1
2
3
4
5
6
7
8
9
10
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
margin: 0.8em;
background: #00FF00 url('bgimage.gif') no-repeat fixed top;

规范定义：

 

?
1
2
3
4
5
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
margin: .8em;
background: #00FF00 url(bgimage.gif) no-repeat fixed top;

4，css 代码的格式

漂亮统一的代码格式可以提高代码的可读性和可维护性，css 的最佳代码格式主要有以下几点：定义顺序以字母序排列，不考虑浏览器前缀；定义以分号结束；属性名称定义的分号后添加一个空格；多个选择器定义时，每个定义单独占一行。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*css定义顺序以字母序排列；结束用分号；属性名称与值之间添加空格*/
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
 
/*多个选择器定义时，每个选择器单独占用一行*/
h1,
h2,
h3 {
    font-weight: normal;
    line-height: 1.2;
}

5，避免写兼容某个浏览器的 css 代码

避免写特定浏览器兼容代码，这里说的特定浏览器主要指的是万恶的 IE 系列浏览器，IE6，7 尤为严重。碰到浏览器兼容问题，首先考虑的是能否换一种其它的解决方案，如果没有合适的解决方案，记得单独写一个 css 文件给这些特定的浏览器，不要把兼容代码和常规代码混合，这样方便代码的维护，如果后期不支持这些老旧浏览器，可以直接删除这些单独的 css 文件即可。

?
1
2
3
4
5
6
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->

6，记住块元素和行内元素的区别，避免写无用的 css 代码

块级元素显示会独占一行，而行内元素不会独占一行。常见的块级元素有：div p ul ol table h1~h6 等；行内元素有：a em label span strong 等。块级元素的 display 默认样式是 block，而行内元素是 inline，可以通过重新定义 display 来互转块级元素和行内元素。但是记住以下的 css 样式对行内元素是无效的：width height 和垂直方向设置的 margin padding，所以避免给行内元素定义这些无用的样式。

7，记住 css 定义的权重

css 的选择器是有权重的，当有多个样式时，权重高的样式会起作用。说一个插曲，前段时间面试了不少前端工程师，问得最多的一个问题就是 css 权重问题，很可惜的是知道 css 权重的不多。以下是权重的规则：标签的权重为 1，class 的权重为 10，id 的权重为 100，以下例子是演示各种定义的权重值：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现，因为光是靠前后的样式定义来影响最终的样式是不靠谱的，也会给后期的维护埋下一个雷区；另外为了代码的重用性，应尽可能定义小的权重，这和不推荐使用 id 来定义样式是一样的道理。

8，使用 css reset

各个浏览器对不同的标签有其不同的内置的样式，为了使得在不同的浏览器下标签的表现相同，可以定义一个单独的 base.css 文件，重新定义各种标签的默认样式。另外推荐的 css 文件组织是：定义一个 base.css，用于 css reset，定义一个 common.css，用于定义各种公用 css 类。这里有一份 base.css，其实是以上提到的 base.css 和 common.css 的合并，分享给大家：base.css

9，多组合少继承

这种设计方式越来越受到大家的欢迎，各种前端框架中也能看到大量这样的设计。设计的核心思想是：把 css 定义中的固定部分和可变部分分开定义，使得代码达到最大程度的重用，这样的结果是增加了元素上添加的 css 类个数，但是提高了代码的维护性和可读性。如下的例子代码来自 bootstrap 的按钮样式定义

按钮有一个固定的基础样式 btn

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 13px;
  line-height: 18px;
  *line-height: 20px;
  color: #333333;
  ...
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

在此基础上定义各种按钮的特定样式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.btn.disabled,
.btn[disabled] {
  cursor: default;
  background-color: #e6e6e6;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}
 
.btn-large {
  padding: 9px 14px;
  font-size: 15px;
  line-height: normal;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}
 
.btn-large [class^="icon-"] {
  margin-top: 1px;
}
 
.btn-small {
  padding: 5px 9px;
  font-size: 11px;
  line-height: 16px;
}
 
.btn-small [class^="icon-"] {
  margin-top: -1px;
}
 
.btn-mini {
  padding: 2px 6px;
  font-size: 11px;
  line-height: 14px;
}

另外再推荐一下bootstrap框架，在 github 中排名第一的前端框架，出自于 twitter。

10，雪碧图 (css sprite)

这项技术是将多张背景图合并为一张，然后通过设置不同的 background-position 属性来展示不同的背景。现在越来越多的网站采用这项技术，例如：亚马逊，苹果，Google, YouTube 等，我们目前的项目MSB也部分使用了这些技术。其优点是减少 http 请求背景图的次数, 降低服务器的压力，页面的背景图能同时出现，避免出现空白背景。缺点是不好维护，另外有试验的结果显示会稍微影响渲染的速度，因为要计算 position，但是其优点大于缺点，尤其是网站的背景图多的时候。现在也有多个工具可以帮助我们自动合并背景图和生成相应的 background-position。

http://spritegen.website-performance.org/

http://csssprites.com/

http://drupal.org/project/sprites

另外，如果你使用的是 asp.net 来开发网站，可以使用微软开源的一款工具，可以在运行时生成对应的 css srite。

具体参考这里：GENERATE CSS SPRITES IN ASP.NET

 

以上就是我认为比较重要 CSS 标准实践，都是从整体来关注 css 的标准实践，其实 css 中细节的的一些最佳实践还有很多，需要具体问题需要具体讨论，目前各个工程师写的 css 代码多种多样，也比较混乱，也与 css 代码容易上手并且相同的效果实现方法有多种多样有关。不管语言的灵活性如何，养成一个良好的写代码习惯非常重要，这些需要在实践中不断总结和提高，希望这篇文章能给刚开始学习 css 的同行们提供一些帮助，在技术的提高过程中少走一些弯路。