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

二维码：

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

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

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

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

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