CSS 代码为什么要优化? 有什么用? 下面本篇文章就来给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
CSS 代码优化作用与意义
1, 减少占用网页字节. 在同等条件下缩短浏览器下载 CSS 代码时间, 加快网页打开速度.
2, 简化和标准化 CSS 代码, 便于日后维护.
3, 让自己写的 CSS 代码更加专业.
需要优化 CSS 代码地方:
1. 使用 Reset 但并非全局 Reset. 不同浏览器元素的默认属性有所不同, 使用 Reset 可重置浏览器元素的一些默认属性, 以达到浏览器的兼容. 但需要注意的是, 请不要使用全局 Reset.
2. 良好的命名习惯.
3. CSS 代码缩写. 可以提高写代码的速度, 精简代码量. 在 CSS 里面有不少可以缩写的属性, 包括 margin, padding, border ,font ,background 和颜色值等.
4. 利用 CSS 继承. 如果页面中父元素的多个子元素使用相同的样式, 那最好把他们相同的样式定义在其父元素上, 让它们继承这些 CSS 样式. 可以很好的维护代码, 减少代码量.
5. 使用多重选择器. 如果他们有共同的样式, 可以合并多个 CSS 选择器为一个. 这样做不但代码简洁, 且可以节省时间和空间.
6. 适当的代码注释. 代码注释可以让别人更容易读懂你的代码, 且合理的组织代码注释, 可使得结构更加清晰.
7. 保持 CSS 的可读性. 书写可读的 CSS 将会使得更容易查找和修改样式.
8. 使用外部样式表. 不单更易于维护修改, 更重要的是使用外部文件可以提高页面速度, 因为 CSS 文件都能在浏览器中产生缓存. 内置在 html 文档中的 CSS 则会在每次请求中随 HTML 文档重新下载.
9. 避免使用 CSS 表达式 (Expression). 表达式的问题就在于它的计算频率要比我们想象的多. 不仅仅是在页面显示和缩放时, 就是在页面滚动, 乃至移动鼠标时都会要重新计算一次. 给 CSS 表达式增加一个计数器可以跟踪表达式的计算频率. 在页面中随便移动鼠标都可以轻松达到 10000 次以上的计算量.
10. 代码压缩. 当你决定把网站项目部署到网络上, 那你就要考虑对 CSS 进行压缩, 除去注释和空格, 以使得网页加载得更快. 采用一些工具, 如 YUI Compressor, 利用它可精简 CSS 代码, 减少文件大小, 以获得更高的加载速度.
11. 不要在 ID 选择器和 class 选择器前使用标签名. 例如: div.box { color: #f00; }; 直接 可以 用类名, .box { color:#f00;} 这样浏览器找到这个 class 后就不用再匹配是否存在 div 标签, 从而提高了渲染效率.
12.CSS 的层级关系不要太深. 用 class 直接代替多余的层级元素.
13. 平铺背景图片不要过小, 影响渲染速率.
14. 少用滤镜, 少用 hack, 少用 position:absolute;float 使用要谨慎.
15. 合理化布局 (模块化布局). 可以把样式划分基类和扩展类 , 模块基本相同的样式写在基类里, 不同的再重新用 class 来定义称为扩展类 .
16. 在 CSS 渲染效率中 id 和 class 的效率是基本相当的 .class 最在第一次载入中被缓存, 在层叠中会有更加好的效果, 在根部元素采用 id 会具有更加好 (id 有微妙的速度优势).
更多 CSS 相关知识, 可访问 CSS 教程 https://www.html.cn/css/ !
来源: http://www.css88.com/qa/css3/14302.html