浅谈响应式前端开发中的提取样式代码公用部分的一些思考

在我们日常书写响应式前端页面时，通常的方法是将不同终端的样式代码，通过媒体查询的方式进行区分后，书写在不同的媒体查询条件里。但是这个时候，细心的前端开发者应该有思考过如何处理不同终端之间通用的公共样式。

说实话，这个问题我之前也纠结了好多次，在网上也查了很久，无果。顺便吐槽下百度对CSDN的特殊照顾，随便搜点什么东西，结果排名的前几位大概率会出现CSDN，但是点进去之后发现与要找的信息相差十万八千里。话说，度娘是真的不考虑用户体验了。

言归正传，在一开始的时候，我的做法是彻彻底底的将几乎所有的各终端都用到的样式代码全部提取出来了，这样做的好处是，样式代码文件的体积会小一些。但是接踵而至带来的问题就是，代码的维护性大大降低，那段时间，维护这样的代码，内心会有一种前所未有的一些莫名的恐惧感，是的，这样的代码，维护起来太痛苦了。

和朋友就提取前端页面公用样式的问题进行过一次沟通，朋友给出的方法有2条，一、不提取，各写各的，这种写法，后期维护性极好；二、在媒体查询外，写一个终端的样式，再在其他终端的媒体查询下，写其独有的，并对未进行媒体查询区分的代码进行覆盖。

说实话，以上这些方法，个人觉的都不是最佳方案，在不断的工作过程中，我个人逐渐的总结了一套相对平衡的处理方法，适当提取，即：如果一个模块的样式，在各终端中都几乎一直，每个终端只有细微差别，甚至没有差别，那么这部分需要提取。如果一个模块的样式，有一半左右的样式是公用的，另一半是针对终端的个性化样式，那么不太建议提取，会造成代码维护难度上升。

类似这中在响应式页面中提取公共样式的问题，在行业内是没有通用标准的，只能是见仁见智，使用自己熟悉的习惯和方法。但是，在编程这件事上，我们还是要放下执念，灵活处理，万不可死板教条。

以下，再对上述提出的四种提取公共样式的方法进行比对：

一、完全提取：

优点：代码体积小；缺点：代码维护性差。

二、彻底不提取：

优点：代码维护性高；缺点：代码体积较大，代码冗余、不优雅：

三、媒体查询外写主要终端的，其他终端样式写在媒体查询内；

优点：没有；缺点：维护性差，书写难度大。

四、推荐：灵活适当提取，模块大部分样式都一致的再提取，其余不提取：

优点：适度降低代码体积，代码维护性强。

综上，切图匠建议使用方案四，如果各位切图客们实在不想对样式进行提取，那么使用方案二也是一种退而求其次的选择。慎选方案一及方案三，代码编写有时和生活一样，不存在绝对的完美。