好的 CSS 命名规范能够节约 Debug 时间

简评：Debug CSS 是一种很耗时的操做，若是有良好的命名规范能够节约不少的 Debug 时间。

使用连字符（'-'）分隔字符串

你可能习惯了在 Javascript 中使用小驼峰的命名方式：

var redBox = document.getElementById（'...'）

可是在 CSS 中不建议使用这种命名方式：

.redBox { 
  border：1px纯红色; 
}

而应该使用这种：

.red-box { 
   border：1px纯红色; 
}

这是一个标准的 CSS 命名规则，有更好的可读性。

此外，他和 CSS 属性名称一致。

//正确
.some-class { 
   font-weight：10em 
}
//错了
.some-class { 
   fontWeight：10em 
}

BEM 命名规范

团队有不一样的方法来编写 CSS 选择器。一些团队使用连字符分隔符，而其余团队则倾向于使用更加结构化的称为 BEM 的命名规范。

通常来讲，CSS 命名规范有三个问题要解决：

1. 可以经过名字就能清楚选择器的功能。
2. 可以看出选择器在哪里可使用。
3. 可以看出 class 之间的关系。

你有没有见过这样写的类名：

.nav--secondary {
  ...
}
.nav__header {
  ...
}

这就是 BEM 命名规则。

B 表明块（Block）

BEM 试图将整个用户界面分红可重用独立的块（Block，注意这里的 Block 并不是指 inline-block），一个 header 是一个 block，header 里面嵌套的元素（logo、input、menu）也能够是 block 。

举个例子下面的图片：

这是一个火柴人（咱们能够把它看作一个 Block），按照以前的说法，这个组件的命名咱们能够设为 stick-man。

主键的样式应该以下所示：

.stick-man { 

}

E 表明元素

Block 中通常会有多个元素，举个例子：火柴人有一个 head，两个 arms 和 feets

head、feet、和 arms 是该组件中的全部元素。使用 BEM 命名规则，经过双下划线链接块（Block）和元素（Elements）方式来命名。

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M 表明修饰符

BEM 中 M 表明修饰，能够对块（Block）或元素（Element）进行修饰（外观或行为的调整），咱们能够调整咱们的火柴人生成蓝色火柴人和红色火柴人（实际上咱们可能须要一个蓝色按钮和一个红色按钮）。

使用 BEM 的命名规则咱们使用双链接符来命名（'--'）

例如：

.stick-man--blue {
}
.stick-man--red {
}

修饰符也可用于元素（element），例如咱们只想调整火柴人的头部大小。咱们能够这样命名

.stick-man__head--small {
}
.stick-man__head--big {
}

以上就是 BEM 的命名方式，这种命名方式虽然有点啰嗦可是在复杂的工程中能够很好的理清各部分之间的关系，若是只是简单的工程直接使用分隔符命名就好了。

在 JavaScript 中用到的 CSS 类名应该如何命名

当你看到这个篇文章开始着手重构本身的项目。

你将原来的代码：

<div class="siteNavigation">
</div>

改为了：

<div class="site-navigation">
</div>

这看着很棒，可是你忘了你在某个地方（JavaScript）用到了这个类名：

//the Javasript code
const nav = document.querySelector('.siteNavigation')

这个时候 nav 将会获得 null。

为了防止这种状况，咱们可使用以下的命名来提醒咱们。

使用 'js-*' 来命名

咱们可使用 js- 来命名咱们的类:

<div class="site-navigation js-site-navigation">
</div>

在 JavaScript 代码咱们使用 js-site-navigation 来获取该 DOM：

//the Javasript code
const nav = document.querySelector('.js-site-navigation')

如今咱们只要一看到 js-site-navigation 就会想到，在某个 JavaScript 代码中使用该类名获取 DOM 对象。

英文原文： CSS Naming Conventions that Will Save You Hours of Debugging