css样式优化的好处

ccs优化的好处

css样式优化是之前工作中经常遇到的,做项目中经常遇到css重复样式过多、命名不合理、没有进行抽象复用、过度嵌套,让内容依赖于容器.,随着项目越来越庞大,修改起来十分不变,今天就来总结一下优化css代码的好处,总结如下:

• 优化css代码可以提高页面加载性能,减小css文件体积,提升页面的加载速度.
• 提升css代码的可维护性

1. 在项目中,一个项目的整体设计风格相似,页面中都有一些风格一致但有些许不同的模块页面.我们可以利用这一点尽可能多的复用css代码,减少新增代码.css代码复用的多,我们只需要在一些不同的地方增加css代码,这样不仅能提升页面性能,加快渲染速度,提升代码可维护性,还可以提升我们的开发效率.
2. 将统一样式写在一张公共样式表中,还可以提升css代码的扩展性.如果新页面有不同的需求,我们只需要引用旧css样式,并将不同处进行覆盖.
3. 易修改,当出现修改样式需求时.我们如果学会复用css代码.就可以轻易的找到需要修改的,只需要修改引入的公共部分就可以修改,所命名属性选择题,减少样式的层级结构.避免嵌套过多
4. 便于其他开发人员阅读样式代码

分析总结

• 写css样式前,我们可以首先对整套页面进行分析,

1. 页面主要分为几个模块,哪些模块可以公用,常用如头部导航栏,底部栏.标题,菜单栏等.
2. 分析每个模块都有哪些样式,在各个模块分别提取出公共样式,分为全局公共样式 ,布局公用(模块内部的样式)比如:页面的容器布局,标题栏布局等一切代码可以复用的地方.
3. 写页面时,先将基础样式表搭建好,如字体大小,字体颜色,行高等,清除浮动等.
4. 最后根据不同的页面功能,划分模块,依次实现.

css优化相关做法

1. 避免使用多层级选择题,层级越少越好.
2. 注意删去无用css样式,影响文件加载速度.增加渲染时间
3. 利用css继承性,减少代码量,比如颜色,字体,字体大小,有些不可继承如:position,display,float
4. 规范的命名,提升可读性
5. 提取重复样式,结构与样式分离,容器与内容分离.