简评：调试CSS是一个非常耗时的操作，一个好的命名规范可以节省很多Debug时间。使用连字符（'-'）分隔字符串您可能习惯在Javascript中使用驼峰式大小写：varredBox=document.getElementById('...')但在CSS中不推荐这样做：.redBox{border:1pxsolidred;}相反，使用这个：.red-box{border:1pxsolidred;这是一个标准的CSS命名约定，以提高可读性。此外，它与CSS属性具有相同的名称。//correct.some-class{font-weight:10em}//wrong.some-class{fontWeight:10em}BEM命名约定团队使用不同的方法来编写CSS选择器。一些团队使用连字符分隔符，而另一些团队更喜欢称为BEM的更结构化的命名约定。总的来说，CSS的命名约定有3个问题需要解决：通过名字就可以明确选择器的作用。能够看到可以在哪里使用选择器。可以看出类之间的关系。你见过这样写的类名吗：.nav--secondary{...}.nav__header{...}这是BEM的命名约定。B代表块。BEM试图将整个用户界面划分为可重用的独立块（Block，注意这里的Block不是指inline-block），一个header就是一个块，header中的嵌套元素（logo、input、menu）也可以是一块。以下图为例：这是一个火柴人（我们可以把它想象成一个方块）。根据前面的说法，我们可以将这个组件命名为stick-man。主键的样式应该是这样的：.stick-man{}E表示元素Block中通常有多个元素，例如：一个火柴人有一个头，两个手臂和脚头，脚，手臂在此组件的所有元素。使用BEM命名规则，使用双下划线连接块（Block）和元素（Elements）来命名。.stick-man__head{}.stick-man__arms{}.stick-man__feet{}M代表修饰符。在BEM中，M代表modification，可以修改块（Block）或者元素（Element）（调整外观或者行为），我们可以调整我们的火柴人生成蓝色火柴人和红色火柴人（实际上我们可能需要一个蓝色按钮和一个红色按钮）。使用BEM的命名规则，我们使用双连接符来命名（'--'）例如：.stick-man--blue{}.stick-man--red{}修饰符也可以用于元素（element），对于例如我们只想调整火柴人的头部大小。我们可以这样命名.stick-man__head--small{}.stick-man__head--big{}以上就是BEM的命名方式。这种命名方式虽然有点啰嗦，但是在复杂的项目中可以很好的梳理各个部分。之间的关系，如果只是一个简单的项目，直接用分隔符命名即可。JavaScript中使用的CSS类名应该如何命名？当你看到这篇文章时，开始重构你的项目。您将原始代码：
