怎么拯救你，我的样式

近段时间做的项目涉及到样式的重构，所以也总结了一些自己的想法。

我接到的摊子是这样的：

然后是我随意开开的一个文件

我相信大家也都遇到过这样的样式表，一个页面一个样式，表面上看清晰明了，修改简单，但是样式的总大小已经超过500k了，而且大量的重复代码，各种乱七八糟的hack，初一看云里雾里，细一看，还不如初一看，我本想着合并样式表然后改改算了，可是一下就崩了，直接就考虑怎么重构了。其实class最重要的功能就是样式的可重复应用，但是显然这已经完全违背了样式表的这一特点了。
这算是我见过的第二烂的样式表了！第一烂的是当年刚毕业进的一家公司，每一个页面的样式表都内嵌在html里面，那个估计这辈子会永居第一了！:( ，再扯就会想到被样式揉拧的那些年了，言归正传，下面我就说说我是怎么来拯救这个样式的吧！
关于样式架构我个人觉得得满足以下几点：

文件尽可能最少
内容尽可能可以重用
样式包含三部分，重置样式（reset），可重用样式(function)，页面结构样式
兼容性样式一定分离开如(针对ie的样式)

文件尽可能少：这个其实是样式加载机制原因，外联样式第一次加载后是可以被缓存的，而且文件少可以减少http请求，这次我的重构样式只有一个style.css。
内容尽可能重用：这个没啥好说了，样式表的重要特性。
样式包含三部分：
reset：reset就不用多说了，记着reset的本质是统一标签样式，没用到的，其实没必要统一的。虽然网上各种reset，但是如果追求极致的话，基本都是可以减小的。
function：这一块是最精髓也最需要功力的部分，大多数公用的样式出自这里，大家应该经常会看到这种的html结构：

其实看看样式名就知道，mt5就是margin-top:5px, pr10就是padding-right:10px，完全充体现出了样式的重用性，但是拆分的粒度太小，而且还很落伍，为啥？看官别急，后面我会慢慢道来！~，function其实不仅是一些小样式的公用类，其实更多的是组件级别的，或者布局级别的公用类，比如有一个标签云我大概会这么组织的：

div.tag-cloud{ font-size:1em; text-align: justify; } 
.tag-cloud .xxs,
.tag-cloud .xs,
.tag-cloud .s,
.tag-cloud .l, 
.tag-cloud .xl, 
.tag-cloud .xxl{ line-height:1.5; display:inline-block; }
.tag-cloud .xxs{ font-size:0.5em; } .tag-cloud .xs{ font-size:0.7em; } . . .

以上这个算是一个组件放在function里，用法一看便知了，如果引用的组件要需要微调其结构的话，则将其写在样式的第三部分里面。
页面结构样式：这一块注意的点是，当你开始架构你的样式之前就请规定好页面结构的class命名，比如头部和底部公用的话，中间部分我们可以这么来定义如：

<div class="main 模块名 页面文件名">...</div>

这样第三部分自然就用class分成细小的块而且页面间不冲突，一层层的继承关系，比如 main可以用来大的公共布局，比如：padding:5px，然后被后面模块和页面继承，模块又有自己的样式，然后继承给页面，最小的单位就是单个页面，可以毫不冲突的给页面加样式。而不会像原来随便写一个样式就会继承一堆样式，最后还得自己一个一个的reset。:(
兼容性分离：我觉得这块本来就是历史遗留下来的糟粕，我们只要能写出兼容w3c标准的样式，对于这些不兼容问题能避免的尽量避免，比如拿上面的标签云来说吧，为了兼容ie6,7的haslayout，就用a或者span来当做每一个标签的dom结构，而不是用div或者li，为啥？因为内联元素在ie6-7下才能得到display:inline-block的效果。大多数的地方能够规避掉，然而没有人能保证写的样式就完全能规避掉所有兼容性问题，所以只能用其他方式来弥补了，比如我的做法就是单独建立一个ie.css，然后在页面上加上这一句：

<!--[if IE]> 
  <link href="./ie.css" media="screen, projection" rel="stylesheet" type="text/css" /> 
<![endif]-->

在ie环境下会加载这个文件来兼容某些ie，文件里面专门用hack来处理各种兼容性，我相信总有一天这个文件会越来越小最后不用的。所以独立开来了。
其实样式组织好了能减少很多不必要的时间浪费，虽然时间花的久点，但是我觉得完全值得，就算以后交接下一个或者多人开发的话也很快能上手。
由于这个项目只有我一个人所以没有考虑太多多人开发的方式，如果多人开发的话，我觉得可以把reset，function，结构页面适当分成多个文件：比如可以把reset 和公用的细粒度的样式放在comm.css中，然后按模块将function和结构页面分给其他人，然后发版的时候打包到一起就行了。
还记得上面我说的关于超细粒度的样式很落伍吗？现在有很多的css框架，能完全解决这些问题的，让html更加干净而且不影响代码结构。其实原来我一开始很排斥框架我觉得用了会变傻，但是自从原来老大逼着我用了几天就爱不释手了，不是都说了么，看过了玫瑰谁还会留恋野草啊。现在欲罢不能，效率提高不止一倍。最后通过打包我的样式从原来的500k，70多个文件变成了2个文件总共73k。
那天是周五下午，我终于写完提交了，然后我推开窗户，哇靠，太阳挺温暖！聊聊天喝杯茶放松一下，抬头看看，嗯，天是蓝色的哦。:)

原创文章，可随意转载，但是请注明出处，感谢支持！

zp8497586rq