css架构探索

在我最初接手并网项目时，一个页面，甚至整个项目中，一条样式属性会在css文件中出现无数次，比如：

1 .test{float: left;margin-top: 10px;color: #525252;font: 14px/20px "Microsoft YAHEI"}
2 .demo{float: left;margin-top: 10px;background: #ececec;}

html调用类名：

1 <p class="test"></p>
2 <div class="demo"></div>

从上面的示例代码可以看出，float：left 和 margin-top：10px 出现了两次，而整个项目中，这样的情况出现了很多次，其实，这样做真的很LOW。

高效的css应该具备：简洁、模块化、低耦合三个特点。显然，我一直不曾做到。。。

此处从css样式的分离开始一步一步写出一个高效的css代码

上面.test的样式可以这样拆分：

1 .fl-l{float: left;}
2 .mg-t{margin-top: 10px;}
3 .col{color: #525252;}
4 .f14{font-size: 14px;}
5 .f-m{font-family: "Microsoft YAHEI";}
6 .lh20{line-height: 20px;}

这时候调用样式就变成：

1 <p class="fl-l mg-t col f14 f-m lh20"></p>
2 <div class="fl-l mg-t bg-ece"></div>

前后对比，单从css来看，分离后的css使用效率更高了，没有重复声明的属性出现，不过，再看看html结构却发现，好像变得有点糟糕了，分离后的css在html中的调用导致了html结构异常复杂，每一个class都带有多个类名（三四个是可以接受的，但五六七八个就有点说不过去了），虽然上面的修改使得html结构压力倍增，可是css分离的优点的确凸显了啊，那么只要再做一番其他的工作来弥补html结构上的压力就能达到我们最初想要提高css架构效率的目的了。

分离必然是核心思想，但仅仅有分离是绝对不够的，我们还需要合并！

下面来看一段比较长的css代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8" />
 6     <script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
 7     <script type="text/javascript" src="script/jquery.dropkick-min.js"></script>
 8     <script type="text/javascript" src="script/laydate.js"></script>
 9     <link rel="stylesheet" type="text/css" href="style/dropkick.css">
10     <link rel="stylesheet" type="text/css" href="style/laydate.css">
11     <link rel="stylesheet" type="text/css" href="style/molv/laydate.css">
12     <style type="text/css">
13     *{    margin: 0;padding: 0;list-style: none;}
14     html,body{    height: 100%;}
15     .head_form{    width: 100%;height: 45px;}
16     .chart_show_box{width: 100%;position: absolute;    top: 45px;bottom: 0;}
17     .chart_show_main{width: 100%;}
18     .content_show{width: 100%;height: 470px;}
19     .left_show{width: 100%;position: absolute;top: 470px;bottom: 0px;background: #000;}    
20     .chose_select{margin-top: 5px;}
21     .head_form label{display: inline-block;    margin-top: 5px;margin-left: 10px;font:14px/30px "Microsoft YAHEI"; }
22     .head_form input{height: 24px;line-height: 24px;}    
23     </style>    
24 </head>
25 <body>
26     <div class="head_form">
27         <form action="">
28             <select class="chose_select">
29                 <option value="1">这是选项1</option>
30                 <option value="2">这是选项2</option>
31                 <option value="3">这是选项3</option>
32                 <option value="4">这是选项4</option>
33                 <option value="5">这是选项5</option>
34                 <option value="6">这是选项6</option>
35             </select>
36             <label for="">
37                 <span>预测日期:</span>
38                 <input type="text"  id="date_one">
39             </label>
40             <label for="">
41                 <span>参考日期:</span>
42                 <input type="text"  id="date_two">
43             </label>
44             <button>修正</button>
45             <button>全部修正</button>
46         </form>
47     </div>
48     <div class="chart_show_box">
49         <div class="chart_show_main">
50             <div class="content_show" style="position:relative">
51                 <iframe src="http://www.baidu.com" frameborder="0" width="100%" height="100%"></iframe>
52             </div>
53             <div class="left_show">
54                 
55             </div>
56         </div>
57     </div>
58 </body>
59 </html>

但看上面的css，会发现如width、position、bottom、margin-top等属性都是被反复声明的，此时可以作如下修改。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8" />
 6     <script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
 7     <script type="text/javascript" src="script/jquery.dropkick-min.js"></script>
 8     <script type="text/javascript" src="script/laydate.js"></script>
 9     <link rel="stylesheet" type="text/css" href="style/dropkick.css">
10     <link rel="stylesheet" type="text/css" href="style/laydate.css">
11     <link rel="stylesheet" type="text/css" href="style/molv/laydate.css">
12     <style type="text/css">
13     *{    margin: 0;padding: 0;list-style: none;}
14     html,body{    height: 100%;}
15     .w100p{width: 100%;}
16     .pos-a{position: absolute;}
17     .mg-t{margin-top: 5px;}
18     .b{bottom: 0;}
19     .head_form{height: 45px;}
20     .chart_show_box{top: 45px;}
21     .content_show{height: 470px;}
22     .left_show{top: 470px;background: #000;}    
23     .normal-label{display: inline-block;    margin-top: 5px;margin-left: 10px;font:14px/30px "Microsoft YAHEI"; }
24     .normap-input{height: 24px;line-height: 24px;}    
25     </style>    
26 </head>
27 <body>
28     <div class="head_form w100p">
29         <form action="">
30             <select class="chose_select mg-t">
31                 <option value="1">这是选项1</option>
32                 <option value="2">这是选项2</option>
33                 <option value="3">这是选项3</option>
34                 <option value="4">这是选项4</option>
35                 <option value="5">这是选项5</option>
36                 <option value="6">这是选项6</option>
37             </select>
38             <label for="" class="normal-label">
39                 <span>预测日期:</span>
40                 <input type="text"  id="date_one" class="normap-input">
41             </label>
42             <label for="" class="normal-label">
43                 <span>参考日期:</span>
44                 <input type="text"  id="date_two" class="normap-input">
45             </label>
46             <button>修正</button>
47             <button>全部修正</button>
48         </form>
49     </div>
50     <div class="chart_show_box w100p pos-a b">
51         <div class="chart_show_main w100p">
52             <div class="content_show w100p" style="position:relative">
53                 <iframe src="http://www.baidu.com" frameborder="0" width="100%" height="100%"></iframe>
54             </div>
55             <div class="left_show w100p pos-a b">
56                 
57             </div>
58         </div>
59     </div>
60 </body>
61 </html>

经过样式分离，发现css样式减少了很多，而html除了主体结构调用类名较多以外其他地方并没有过多调用。而前面提到的width、position、bottom、margin-top等属性都被单独抽取出来，做公用样式处理。

注意：此处设想label和input在页面中使用通用样式，那么此处label和input就不再适合被拆分，而应该独立声明一个整体样式。

可拆分的属性：非公用组件或者布局框架样式，如标题栏，圣杯布局的div块等等。

合并属性：公用组件和布局框架，如按钮、文本框、下拉列表、label、标题栏、icon图片等等

是否每一个元素都需要有class类名？

按照上面分离与合并的思维，是否所有html元素都拥有一个类名就对了呢？来看看这样的示例：

 1 <ul>
 2         <li class="a"><span class="b"></span></li>
 3         <li class="a"><span class="b"></span></li>
 4         <li class="a"><span class="b"></span></li>
 5         <li class="a"><span class="b"></span></li>
 6         <li class="a"><span class="b"></span></li>
 7         <li class="a"><span class="b"></span></li>
 8         <li class="a"><span class="b"></span></li>
 9         <li class="a"><span class="b"></span></li>
10     </ul>

可以想想，一个项目中列表何其多，难道每一个都要这么做么？这简直是噩梦，而且，无端的增加了html结构的复杂性。

我们在实际工作中，拿到设计稿的第一时间并非打开你的sublime，而应该是拿起一支笔和一张纸，或者任何可以作记录的东西，仔细观察设计稿中的通性元素，比如你可能发现三个一样的列表、十个一个的标题、六个相同段落，而这些元素中可能包含li、span、i等等元素，我们完全没有必要为每一个元素都添加class，他是一个整体，合理使用后代声明规则可以实现我们想要的效果。

到现在，我们应该如何实现一个初步的模块化css架构呢？

首先，仔细观察页面设计稿内部的公用元素和组件，在书写页面的时候刻意合并公用元素的样式，这样直接调用即可实现。

其次，在页面构建完成后抽取部分可分离样式，css文件最上层cssReset之后就是分离样式的书写，切记同类型样式要书写在一起，比如：

1 .w100p{width: 100%;}.w120{width: 120px;}.w78{width: 78px;}.w200{width: 200px;}
2 .pos-a{position: absolute;}.pos-r{position: relative;}
3 .mg-t5{margin-top: 5px;}.mg-r7{margin-right: 7px}.mg-b6{margin-bottom: 6px}

这样书写的好处在于同类型样式在一起，从维护到后期修改都能一目了然。

最后，如果页面中存在某一个单独的样式（不存在于别的页面），请直接书写在<style></style>标签对中，这么做的好处不仅仅是减少了css文件大小，还提高了样式加载速度，淘宝就是这么干的。