学习详解CSS代码重构与优化之路.docVIP

学习详解CSS代码重构与优化之路 CSS代码重构的目的： 　　我们写CSS代码时，不仅仅只是完成页面设计的效果，还应该让CSS代码易于管理，维护。 我们对CSS代码重构主要有两个目的： 　　1、提高代码性能 　　2、提高代码的可维护性 　　3、提高代码性能 　　提高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文件可以被缓存、重用，维护成本降低 　　2、不使用@import 　　这条手段已经是众所周知，这里简单提一下，@import影响css文件的加载速度 　　3、避免使用复杂的选择器，层级越少越好 　　有时候项目的模块越来越多，功能越来越复杂，我们写的CSS选择器会内套多层，越来越复杂。 　　建议选择器的嵌套最好不要超过三层，比如： 　　header.logo.text{} 　　可以优化成 　　haeder.logo-text{} 　　简洁的选择器不仅可以减少css文件大小，提高页面的加载性能，浏览器解析时也会更加高效，也会提高开发人员的开发效率，降低了维护成本。 　　4、精简页面的样式文件，去掉不用的样式 　　很多时候，我们会把所有的样式文件合并成一个文件，但是这样有一个问题：很多其他页面的CSS同时引用到当前页面中，而当前页面并没有用到它们，这种情况会造成两个问题： 　　(1)样式文件偏大，影响加载速度 　　(2)浏览器会进行多余的样式匹配，影响渲染时间。 　　正确的处理方法是根据当前页面需要的css去合并那些当前页面用到的CSS文件。 　　PS：合并成一个文件有一个优点：样式文件会被浏览器缓存，进入到其他页面样式文件不用再去下载。这条规则应根据场景来区别对待，如果是大项目，应该合并成不同的样式文件，如果是简单的项目，建议合并成一个文件即可。如果无法确认项目规模，建议分开成不同的样式文件，日后要合并也比较方便。 　　5、利用CSS继承减少代码量 　　我们知道有一部分CSS代码是可以继承的，如果父元素已经设置了该样式，子元素就不需要去设置该样式，这个也是提高性能的行之有效的方法。 　　常见的可以继承的属性比如： 　　color，font-size，font-family等等 　　不可继承的比如： 　　position，display，float等 　　大家可以查看CSS参考手册 　　提高可维护性的方法 　　提高CSS代码的可维护性，简单的说就是要让开发人员易于理解CSS代码，容易去修改它，不会破坏原有的功能。下面说说一些常用的手段。 　　1、命名与备注