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文件大小，还提高了样式加载速度，淘宝就是这么干的。
posted on
