一、命名
1、使用全小写命名
2、单词之间以短横杠“-”隔开
3、id 命名必须具体且保证唯一
4、变量的命名规则为:
[*属性][*名词说明][补充说明][动词说明]
举例: color-link-hover 表示超链接在 hover 状态下的字体颜色
举例: background-table-td-highlight 表示表格行内容在高亮下的背景颜色
二、顺序
1、属性顺序
正确的书写顺序有助于减少浏览器的重绘, 提高构建 render tree 的效率, 也是提升性能的一个小技巧
1、位置(position, top, right, z-index, display, float等)
2、大小(width, height, padding, margin)
3、文字(font, line-height, letter-spacing,color- text-align等)
4、背景(background, border等)
5、其他(animation, transition等)
2、引入顺序
我们按照样式适用的范围可以将其划分为全站级、产品级、页面级, 在引用样式时也应按照这样的顺序去添加.
此外, 我们可能会引入一些公共库的样式, 这写公共库的样式应该放在我们的自定义样式前面, 这样我们可以保证最终我们的自定义样式优先级最高.
1、初始化 (css reset)
2、全局混入 (css mixin)
3、全局变量 (css const)
4、通用样式 (css common)
5、UI库样式、主题
6、对UI库样式的修改
7、其他自定义样式
三、规范
1、规范
谨慎使用 id 选择器
谨慎使用 !important
禁止使用 @import
禁止使用 expression
禁止直接使用标签选择器修改样式
尽量避免使用 filter
尽量避免使用 CSS Hack
尽量避免在标签上直接写行内样式
尽量简写 css 样式, 例: 属性值为 0 不加单位, 属性值小于 0 不写小数点前的 0
尽量避免使用“低效”的选择器, 如 *, 标签选择器等, 在精准匹配之前或之后使用都不可以
建议使用 tab 缩进(四空格), 冒号后加空格
建议对同一个样式多个选择器的, 每个选择器独占一行
建议对文档流外的元素的视觉层级关系进行管理, 规定各种元素的 z-index 值. 最高 `2147483647`
被js操作的css样式不应该在css样式中出现
关于颜色优先使用十六进制表示(字母小写), 避免十六进制与rgb混用
所有的装饰性的背景图片要写入css中，不能使用img, 背景图片使用css sprite
2、关于上述规范的补充说明
ID 选择器仅在需要获取原生 DOM 时使用
CSS3 中的 @import 会导致浏览器不能并行下载样式, 造成加载延迟, 从而导致页面白屏, 而 SASS 中解决了这个问题, 在 SASS 中使用 @import 相当于将 scss 文件合并.
/** 正常情况下选择器不建议超过三层, 且越靠后的选择器应该越精确 **/
/** 关于低效选择器的例子 **/
* {}
ul > li > a {}
#box div {}
div#box {}
