fontendNote
  • docs
  • sources
    • others
      • 数据结构与算法
        • 第一章:绪论
      • 英语阅读积累词汇
      • git
        • 常用Git命令与技巧
        • sourcetree一直提示输入密码的终极解决方案(亲测有效)
      • case
        • 曲线编辑器
          • canvas实现曲线编辑器
      • 计算机常见单词
    • ts
      • ts 配置参考(带注释)
  • source
    • _about
      • 你可能不知道的 vscode 使用技巧
    • _posts
      • css
        • CSS 优化细则
        • sass
          • sass学习笔记
        • 《css世界》书摘
      • js
        • dom
          • 常用js页面跳转方式
          • 跨浏览器的javascript中鼠标滚轮事件
        • performance
          • js性能优化注意事项
      • node
        • npm-package
          • chokidar
        • node中获取正在运行的全部进程数据
        • node中对路径分隔符的兼容性处理
      • tools
        • 你可能不知道的 vscode 使用技巧
      • leetcode
        • 无重复字符的最长子串
        • 题目
  • scaffolds
    • page
    • post
    • draft
Powered by GitBook
On this page

Was this helpful?

  1. source
  2. _posts
  3. css

CSS 优化细则

  • 慎重使用高性属性:浮动、定位;

  • 去除空规则;

  • 属性值为0时,不加单位;

  • 属性值为浮点数0.**时,可以省略小数点前的0;

  • 标准化各种浏览器前缀,带浏览器前缀的在前,标准的在后;

  • 不使用@import前缀,它会影响css加载速度;

  • 充分利用css继承属性,减少代码量;

  • 抽象提取公用样式,减少代码量;

  • 选择器优化嵌套,尽量避免层级过深;

  • 将css文件放在页面的最上面;

  • 避免使用复杂的选择器,层级越少越好  

有时候项目的模块越来越多,功能越来越复杂,我们写的CSS选择器会内套多层,越来越复杂。

建议选择器的嵌套最好不要超过三层,比如:

.header .logo .text{}

可以优化成

.haeder .logo-text{}

简洁的选择器不仅可以减少css文件大小,提高页面的加载性能,浏览器解析时也会更加高效,也会提高开发人员的开发效率,降低了维护成本。

5、利用CSS继承减少代码量 我们知道有一部分CSS代码是可以继承的,如果父元素已经设置了该样式,子元素就不需要去设置该样式,这个也是提高性能的行之有效的方法。

常见的可以继承的属性比如: color,font-size,font-family等等

不可继承的比如: position,display,float等

关于CSS方法论

PreviouscssNextsass

Last updated 5 years ago

Was this helpful?