CSS代码重构与优化之路
写CSS的同学们往往会体会到，随着项目规模的增加，项目中的CSS代码也会越来越多，如果没有及时对CSS代码进行维护，CSS代码不断会越来越多。CSS代码交错复杂，像一张庞大的蜘蛛网分布在网站的各个位置，你不知道修改这行代码会有什么影响，所以如果有修改或增加新功能时，开发人员往往不敢去删除旧的冗余的代码，而保险地增加新代码，最终的坏处就是项目中的CSS会越来越多，最终陷入无底洞。
CSS代码重构的目的
我们写CSS代码时，不仅仅只是完成页面设计的效果，还应该让CSS代码易于管理，维护。我们对CSS代码重构主要有两个目的：
Northern Dance No. 3 in G major - From "La Tersicore del Nord" Op. 147
1、提高代码性能
2、提高代码的可维护性
提高代码性能
提高CSS代码性能主要有两个点：
1、提高页面的加载性能
提高页面的加载性能，简单说就是减小CSS文件的大小，提高页面的加载速度，尽可以的利用http缓存
2、提高CSS代码性能
不同的CSS代码，浏览器对其解析的速度也是不一样的，如何提高浏览器解析CSS代码的速度也是我们要考虑的
提高代码的可维护性
提高CSS代码的可维护性主要是体现在下面几点：
1、可重用性
一般来说，一个项目的整体设计风格是一致的，页面中肯定有几个风格一致但有些许不同的模块，如何在尽可能多地重用CSS代码，尽可能少地增加新代码，这是CSS代码中非常重要的一点。如果CSS代码的重用性高，我们可能只需要写一些不一样的地方，对页面性能和可维护性、提高开发效率都有很大的帮助。
2、可扩展性
如果产品增加了某个功能，我们应该保证新增加的CSS代码不会影响到旧的CSS代码和页面，并且尽可能少地增加新代码而重用旧代码。
3、可修改性
如果某个模块产品经理觉得要修改样式，或者要删掉它，如果没有规划好相应的CSS代码，过了一段时间之后，开发人员可能已经不记得这段代码作用了几个地方，不敢修改或删除它，这样下去CSS代码也就越来越多，影响了页面的性能，还造成了代码的复杂度。
CSS代码重构的基本方法
前面说到了CSS代码重构的目的，现在我们来说说一些如何达到这些目的的一些基本方法，这些方法都是易于理解，容易实施的一些手段，大家平时可能也不知不觉地在使用它。
提高CSS性能的手段
首先说说如何提高CSS性能，根据页面的加载性能和CSS代码性能，主要总结有下面几点：
1、尽量将样式写在单独的css文件里面，在head元素中引用
有时候为了图方便或者快速搞定功能，我们可能会直接将样式写在页面的style标签或者直接内联在元素上，这样虽然简单方便，但是非常不利于日后的维护。将代码写成单独的css文件有几点好处：
（1）内容和样式分离，易于管理和维护
（2）减少页面体积
（3）css文件可以被缓存、重用，维护成本降低
转载请注明：翠竹林 » CSS代码重构与优化之路
