Scss 规范

Scss 规范

缩进

使用 tab 缩进（2 个空格）

.element {
  border-radius: 10px;
  width: 50px;
  height: 50px;
}

分号

每个声明结束都要加分号

.element {
  border-radius: 10px;
  width: 50px;
  height: 50px;
}

注释

注释统一使用 /* */

.element {
  /* border-radius: 10px; */
  width: 50px;
  height: 50px;
}

引号

• url 的内容要用引号
• 属性选择器中的属性值需要引号

.element:after {
  content: "";
  background-image: url("logo.png");
}
li[data-type="single"] {
  ...;
}

命名

BEM 命名原则

• block：模块，名字单词间用 - 连接
• element：元素，模块的子元素，以 __ 与 block 连接
• modifier：修饰，模块的变体，定义特殊模块，以 -- 与 block 连接

/* 举个例子 */
.block__element {
}
.block--modifier {
}

命名规范

• 类名使用 BEM
• id 采用驼峰式命名
• scss 中的变量、placeholder 采用kebab-case命名，函数、混合采用camelCase命名

/* class */
.element__content {
  ...;
}
/* id */
#myDialog {
  ...;
}
/* 变量 */
$color-black: #000;
/* 混合 */
@mixin center-block {
  ...;
}

有效使用 css 选择器

选择器嵌套应少于 3 级

/* bad */
.page .header .login #username input {
}
/* good */
#username input {
}
复制代码

有效使用 css 选择器，因遵循以下原则

• 保持简单，不要使用嵌套过多过于复杂的选择器。
• 通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用。
• 不要使用类选择器和 ID 选择器修饰元素标签。
• 不要为了追求速度而放弃可读性与可维护性
• 避免使用 CSS 表达式

慎重选择高消耗的样式

高消耗属性在绘制前需要浏览器进行大量计算：

box-shadows
border-radius
transparency
transforms
CSS filters（性能杀手）
复制代码

避免重绘重排

当发生重排的时候，浏览器需要重新计算布局位置与大小，不利于性能优化。 常见引起重绘重排属性和方法

• 添加或者删除可见的 DOM 元素；
• 元素尺寸改变——边距、填充、边框、宽度和高度
• 内容变化，比如用户在 input 框中输入文字
• 浏览器窗口尺寸改变——resize 事件发生时
• 计算 offsetWidth 和 offsetHeight 属性
• 设置 style 属性的值

减少重绘重排的方法

• 使用 transform 替代 top
• 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
• 不要把节点的属性值放在一个循环里当成循环里的变量。
• 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
• 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame
• CSS 选择符从右往左匹配查找，避免节点层级过多