最近在群里看到这样一句话“前后端都搞之后，你就会更好地写页面，有些不懂后端的人写出的页面，根本就不好循环调用的"，接着马上有人接上了下一句“前端和设计都搞之后，你就会更好地设计页面，有些不懂前端的人设计出的页面，根本就不好切图的”。

两句玩笑话，却也是现在网站开发中的实情。

最近做项目我也遇到了这一问题，自己写的独立的html页面每一个看起来都没问题，而后端调用的时候总是会出现样式的问题，尤其是提交表单的情况，表单本来我是分成了不同的html文件，结果到了后端手中，需要把这几个表单放在同一个文件里面，由于表单外围包围的class类名不同，所以出现样式丢失、覆盖的情况。然后导致现在做页面也是类名越来越奇怪，越来越长。这显然是一种不好的开发模式，也是由于开始做项目前没有整体规划好，也是自己经验不足。

这就是前端在制作页面的时候需要考虑的重用的问题，一个页面的结构的划分，每一个模块的样式的分析，要在哪个部分加上class来控制样式；样式的控制具体要到哪一级的程度，这样写会不会出现以后修改的麻烦，是否能够在别的地方也用这种样式，是否能够大体也用这种样式，但就是部分不同；你要去改，应该怎么改，会不会出现原来设置的选择器过于详细导致后面的修改都无效的情况。

要想提高页面的重用性，在写样式的时候通过父级元素一层层来选取的方法我感觉是不可取的，这样会导致嵌套的DIV越来越多，样式选取越来愈细而不易更改，同样会导致CSS文件越来越大。好一点的办法应该是分析项目结构，将模块归类，也就是抽象的过程。

更可以像张鑫旭的quicklayout那样，写出一套能适应各种不同设计方案的CSS，只需要在html文件的每个具体元素上面写上众多详细的类名就行了，好处是css文件小很多，但html可能会增加一点。凡事必有利弊。当然，现在项目中对于那一点代码文件的增减不是那么看中。毕竟不是什么谷歌，百度这样用户量极大的网站页面。

前端的事还有很多，作为一个前端，也是不能只学前端而已。路漫漫其修远兮，少年传我影分身术可好？

——下面是一些零碎的东西————

不要对网站通用的东西进行分离：也就是说不要用写众多类名的方式来定义这个东西的样式，原因显而易见，当你要改样式的时候，由于网站众多部分应用了它，你就需要在众多html文件里对他进行修改，电商网站成百上千个页面的，我只能送你呵呵一笑了。

用一层一层的选择器来定义通用的大概的模式，再加上零碎的通用class来实现不同的效果。“大概”的程度根据项目来决定。

如果能在css文件里面的class的大括号{}内再引用其他class就好了；

如果能在css文件里面的class的大括号{}内能定义优先级就好了（其他冲突样式一律无效，只认本样式：覆盖其他样式，涉及到css选择器的优先级），是该好好研究下。

设计、前端和后端