重新思考CSS的组织方法

Cascading Style Sheets中文翻译一般为层叠样式表，本文介绍现代的CSS组织方式。

一、不要把CSS当SS来用

引起我重新思考的是“层叠”两个字，我发现很多人，包括我自己，都是把CSS当做SS来用，以至于回头看自己以前写的CSS，竟觉得犹如迷宫。

二、注重可重用性

另外一方面，有一个布局我记得以前写过，翻回以前的代码，发现要拿来直接用，也得对其动一次大手术，顶多就是借鉴一下布局的思想和写法而已，可重用性极低。

三、注重标签语义化

如 .aa{color:blue;} 与 .blue {color:blue;}显然后者看起来让人心情愉悦

四、明确ID和Class的任务

用id和class混合定义样式，除非你有很明确的目的，否则是一个很坏的习惯。

五、几个流行的CSS框架组织方式对比。

Blue Print

Base Line

YAML

我的具体做法

一、在开发过程中我会创建三个基础样式，和一个基础风格样式。

1. reset.css包含针对各大浏览器的不同样式。
2. forms.css包含针对各大浏览器的不同样式。
3. global.css包含一些极为小巧，可重用率极高的样式。
4. style.css站点风格控制，包括站点基本风格的设定，页面单独的css续从此样式继承。

示范的global.css

/* Colors */
.red {
    color: red;
    background: inherit;
}

.blue {
    color: blue;
    background: inherit;
}

.highlight {
    color: black;
    background: yellow;
}

/* Lists */
.horizontal {
    list-style-type: none;
    display: inline;
}

.vertical {
    list-style-type: none;
    display: block;
}

/* Text */
.small {
    font-size: small;
}

.large {
    font-size: large;
}

.bold {
    font-weight: bold;
}

二、ID和Class选择器的使用进行标准化。

原则:ID用来标示出这个元素是什么,Class用来标示出这个元素有什么特征。

#container {
 margin: auto;
 width: 500px;
 height: 700px;
 padding-top: 30px;
 font-family: helvetica, arial, sans-serif;
 }

#heading-one {
  padding: 10px 20px;
  margin-left: -20px;
  margin-top: 0;
  position: relative;
  width: 70%;
}

#heading-two {
  padding: 10px 20px;
  margin-left: -20px;
  margin-top: 0;
  position: relative;
  width: 30%;
}
.norm-background {
        color: #fff;
        background: #666;
}

.heading-fancy {
  background: #e3e3e3;
  background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
  background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
  -moz-box-shadow: 1px 1px 3px #292929;
  -webkit-box-shadow: 1px 1px 3px #292929;
  color: #454545;
  text-shadow: 0 1px 0 white;
}

相应HTML代码

 My Heading  
 My Sub-Heading  

这样基本上只要看HTML代码，就能快速的分析出元素的特征，并定位样式。代码可重用度最高，可维护性更强，语义性也很好，缺点是CSS文件数量较多，html页面体积也会稍大，但是这个问题可以使用后台工具重新生成html代码即可解决。

三、在CSS文件中使用缩进。

在Python中，缩进用来代表代码的上下文关系，在HTML中，缩进往往代表标签的层次关系，同样在CSS文件中，ID选择器也可以使用缩进，表明彼此的层次关系，拿上面的代码举例,CSS可以写成这样。

/*first level*/
#container{margin:auto;width:500px;height:700px;padding-top:30px;font-family:helvetica,arial,sans-serif;}
    /*second level*/
    #heading-one{padding:10px20px;margin-left:-20px;margin-top:0;position:relative;width:70%;}
    #heading-two{padding:10px20px;margin-left:-20px;margin-top:0;position:relative;width:30%;}

四、为CSS文件添加注释。

这对可重用性代码是很重要的一点儿，否则，你可能过一段时间以后来看自己写的代码，都不明白是什么意思，或者漏掉某个关键点。

五、引入CSS时用link还是@import。

引入CSS有两种方式

1. <link href="styles.css" type="text/css" />
2. <style type="text/css">@import url("styles.css");</style>

最常见的是第一种，其实两者有很微小的差别，link是标准的html标签，受广泛的支持，@import是CSS2.1之后引入的方法，老的浏览器不支持。使用@import一个原因是，在head标签里，只需要引入一个css，再在这个css里利用@import标签引入其它css。实际效果是插入了一个标签，引入了多个css。 具体使用哪种方式，可以参考这篇文章。