空行&缩进:
缩进为4个空格,
每个选择器上保留一行空行
选择器:
嵌套坚决不允许超过三层,
最右边关键选择器必须为class选择器 觉不允许使用标签选择器/通配符选择器/属性选择器,
当使用id选择器时 绝不允许使用嵌套
页面元素尺寸:
统一使用rem单位,
坚决不允许出现%、px单位
命名:
类选择器统一使用中划线分隔-
图片:
统一使用雪碧图,使用gulp打包工具,
尽可能的避免使用background-size来限制图片大小以避免cpu额外计算,
属性命名时把background-image属性单独抽离出来设值,
千万不要设置background-size来调整图片
一来会导致性能降低 其次会导致background-position定位失效。
请不要设置在background属性中 会导致gulp打包工具无法命中指定图片
浏览器样式统一:
统一使用static中,
编写好的reset.css文件作为重置样式
关于@import:
在css文件中禁止使用该方法调用其他css文件,
但是在less中可以使用,
webpack会进行编译,
无需担心其性能问题。
选择器权重表:
id=100
class、属性选择器、伪类选择器=10
标签选择器、伪对象选择器=1
多层嵌套时权重相加 同权重按顺序覆盖
!important为强制最高权限 禁止使用