记一次项目中的css样式复用

本文同步至微信公众号：http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e965283c632e9035875be43e6a305&scene=0#wechat_redirect

二维码：

一直觉得css是一个不被重视，或者说是重视不够的饭后甜点。因为它太“简单”，门槛低，不能彰显或提升广大闷骚程序猿的逼格。。。一直都想聊聊css相关的一些杂碎。正好借最近的一次项目实践来侃侃css。

    玉伯曾发文章做过类似的比喻说：“css就像语文。大家都认识汉字，也都会写汉字，但是也只有那些牛逼的作家才能写出优秀的文章，而我们却不能”。也就是说css易学难用。一个项目随着页面的增多，css的代码数量也可能直线飙升。不仅加载起来比较慢，对维护的人来说，也不确定这些代码都有什么地方在用，轻易不敢动。。因此，css样式复用的重要性就可想而知了。而这个也是新手或对css不够重视的人欠缺的。。

    上面这些，是不是很虚？不罗嗦了，先上页面设计图（一个答题页面），分析页面布局先：

从设计稿上看，最直观的就是页面中的每一个问题的样式是统一的，也就是可以把问题当作一个question模块进行开发。但是就布局而言，纵坐标上，这些问题的纵坐标好无规律。怎么确定这些问题在页面中的位置呢？私想了一个办法，看下一张图:

没错，就是把整个页面拆解成一个一个的格子。私是把每到题放到500*500的格子，这样，问题就在格子里相对于格子来进行定位，就简单多了。以上就是页面的布局。

    然后是具体的代码了：

    最开始当然是css reset了，

大家都知道，浏览器对于标签是有默认样式的。比如a标签默认是有下划线，li标签默认有一个小点等。然而不同的浏览器对于这些元素的默认值不尽相同，为了屏蔽浏览器对元素默认样式的差异，我们需要重置部分元素的样式。可能大家都看过reset.css。那里面重置的样式有好多，我觉得完全没有必要。我的css reset就上面只有上面这些就够了。我也并不是说别的版本的cssreset就不好。脱离的实际的业务单纯的谈论某个类库的好坏，高下都是不可取的。没有最好的框架，只有最适合自己业务的框架。。

然后是css原子类。所谓的css原子类，入下图：

为什么要有这些css原子类呢？一个大型的项目，一些常用的css规则，比如text-align,float,border,positon等有可能出现十几次，几十次。。加入我们已经在项目开始的时候就已经定义好了我们的css原子类，那么在需要左浮动的元素上只需要引入.fl的class就可以了。原来需要出现几十次的float:left现在只需要出现一次就可以了（理论上是这样）。从理论上讲，只要我们把每个css原子类都定义成一个原子类，那么我们就可以通过这些原子类的不同组合来完成我们的页面了。css原子类是跟具体的项目和业务无关的，定义好的css原子类可以应用到任何的项目当中。css样式分离的确实彻底，其可复用性就越高。就像这些原子类。但是，当一个元素引入的css原子类多起来的时候，那么这个元素的class的值也会快速膨胀起来。。。我在写页面的时候，所能接受的class值得最多的个数是4个。考虑到这个问题呢，就引入了下一个话题，css模块化。

    通常一个项目一个站点，要考虑到站点整体的风格统一。正式因为风格统一，所以大部分的css样式都是可以复用的。比如我本次的项目来说，问题就可以看成是一个模块。问题的html如下

qh是标题，qa是三个选项。最外层的div就是格子，qwrapper相对于格子进行定位。然后定义统一的css样式。虽然页面上有十道题，我只需要写一次html和css.

 

对于每到题目的个性化的样式用过.question1, .question2等类来实现。说到这里，其实这个页面的css样式就差多多了。实际效果见第一张图。在开发中除了这种一个区块看作一个模块来处理之外，比如页面中的所有的buton，text也可以看成一个模块。在需要有button的地方，只需要引入.btn就可以了。就像bootstrap。。。这里需要注意，定义模块样式的时候，只能定义那些稳定的公共的样式。就文本框而言，有的地方的文本框的宽度是100，有的地方是80，这个时候我们就需要把width从样式中分离出去。想下面这样

.txt {

    height:　30px;

    line-height:30px;

    backgroud:#fff;

    font-size:14px

}

那么宽度为100的文本就可以写为：

<text class="txt w100"/>

宽度为80的就可以写为：

<text class="txt w80"/>

.w100为上文中的原子类.w100 {width: 100px}

通过这种方式把项目中的可复用的区块进行模块化。后续开发的时候，只需要引入之前定义好的类库就行了。假设开发之前，我们已经认真的分析过设计稿。分析过那些组件式公共的，在页面中重复出现的。我们就可以开开发初期先开发这些公共的样式，便于后期复用。刚开始的时候，可能会慢一些，但是越到后期会越轻松。

当完成上面的这几步的时候，理论上一个项目的大部分的css样式就已经开发完成了。后续再写页面的时候，只需要引入我们定义好的类就行。仿佛就像是我们针对自己的项目开发了定制版的"bootstrap"...剩下的就是页面特有的页面级的css了。

    考虑到时间和篇幅关系，就不往下写了。以上是我写css的套路。私以为，每个人都应该有自己的套路和模式。形成自己的风格。。。以上的都是个人观点，如果有不对的地方，或者有不同意见的欢迎交流讨论哈