一、color变量的命名与使用

目前项目使用的颜色使用存在两个问题：

• 绝大多数的颜色是直接使用十六进制的方式。不利于后期的维护，比如设计师需要升级样式，或者后期需要做暗黑模式功能。这样我们就必须要进行全项目的批量替换。
• 变量命名不够语义化

样式变量一般分为两种：

// 第一种：设计师维护的色板，所有设计稿上的颜色都取自与这个色板
@blue100: #de6798;
@blue200: #de6768;
@blue300: #de6768;
@gray_1: #de6768;
@gray_2: #de6768;
...
// 第二种：语义化变量，色板里取值，用于常规业务的颜色
@ButtonBg：@blue20;
@primary：@blue20;
...
复制代码

对于前端开发者来说，应该是优先使用语义化变量，再使用色板变量，最后再使用具体的十六进制色值。

二、CSS选择器

由于CSS引擎查找样式表，对每条规则都按从右到左的顺序去匹配。

常见的高开销做法：

#myList li {}
// 针对这行代码，浏览器需要先遍历页面上每个li元素，并且每次都要去确认这个li元素的父元素id是不是myList
* {} 
// 对于通配符，它匹配所有元素，因此浏览器必须去遍历每一个元素
复制代码

结论：

• 1.避免使用通配符
• 2.少用标签选择器
• 3.减少嵌套（后代选择器的开销是最高的，因此尽量把选择器的深度降到最低，最高不要超过三层）
• 4.多用类

三、Font-weight属性值的使用

对于font-weight的取值，最终效果依赖于字体包的支持，如果是使用数值，如果字体包不支持会根据字重匹配规则得到最终渲染出来的字重，这样其实会跟预想值有些偏差。并且在日常开发中，其实使用bold和normal两种就能满足业务需求了。避免使用border和lighter，因为这两者是一个相对值。

更多介绍可看：为什么前端项目里font-weight值不推荐使用数字，而是字重描述符？

结论：

• 尽量使用bold和normal，如果ui设计师有其他字重需要，再用数值
• 避免使用border和lighter

四、word-break:break-all和word-wrap:break-word知多少

多行英文换行时，为了防止文字溢出，并保证单词不截断，使用以下两个属性结合：

word-break:normal;
word-wrap:break-word;
复制代码

详情看：word-break:break-all和word-wrap:break-word知多少

五、慎用存在兼容性的一些CSS属性

1. Overflow:overlay

overflow:overlay跟overflow:auto相似，区别是overlay能够使滚动条出现在内容的顶部而不占用空间。但是这个属性存在兼容性问题，如果使用的话在一些浏览器中就会出现滚动条未出现的情况。

Overlay的使用背景

页面的某个元素，假定其内容超出了设置的宽高，此时需要滚动条。但是UI设计师觉得滚动条可以在鼠标hover时再出现，非hover时隐藏。在滚动条显示与隐藏之间切换时，如果滚动条占据了宽高，就会引起元素内的内容发生抖动，如果滚动条不占据宽高或不挤压内容，交互体验就能有很大优化。

兼容性

解决方案

• 使用overflow:auto或overflow:scroll时，可以预留滚动条的位置。但是这个方案不是很好维护，特别是针对一些组件。
• 可以采用一些第三方插件