参考前端css、less、sass编码规范---BEM
不用ID标识符
主要考虑到样式重用性以及与页面的耦合性。ID本来就是唯一的而且权值那么大，还不如写在行内样式。
#button {
text-decoration: underline;
}
不用大于三层嵌套选择器
嵌套选择器增加了代码耦合，使重用变得不可能，过多的嵌套会导致显示性能下降。简洁的选择器不仅可以减少css文件大小，提高页面的加载性能，让浏览器解析时也会更加高效。同时也会提高开发人员的开发效率，降低了维护成本。子代选择器不好的地方还在于，如果层次关系过长，逻辑不清晰，非常不利于维护。
css的匹配原理不是从左到右的，而是从右到左的，从右边开始匹配是为了尽早过滤掉一些无关的样式规则和元素。
.button_hovered .button__text {
text-decoration: underline;
}
不用组合选择器
组合选择器的耦合性更强，而且可维护性更加差。
.button.button_theme_islands {
text-decoration: underline;
}
我们通过BEM命名法写样式如下：
.block{}
.block__element{}
.block--modifier{}
.block__element--modifier{}
BEM解决了的问题
- 页面CSS模块化，每个block就是一个模块，模块间相互独立，不会造成污染
- 多级的class命名，避免选择器的嵌套结构
- 减少通配符*或者类似[hidden="true"]这类选择器的使用
- 巧妙运用scss的特性，保证了样式的可维护性
BEM将页面解析为block和element，然后根据不同的状态使用modifier来设置样式，在scss的属性帮助下，其实，写BEM并不麻烦。
块
一个块就是一个组件。这有点抽象，所以让我们用示例来学习。
假设您正在建立一个联系表单。在这种情况下，这个表单可以是一个块。在 BEM 中，块被写为像 class 的名字一样，如下所示：
.form { /* styles */ }
BEM 使用 .form 而不是 <form> 元素的原因是因为 类允许无限的可重用性，而即使是最基本的元素也可能改变样式。
按钮很好地阐释了可以包含不同样式的块。如果将 <button> 元素的背景颜色设置为红色，则所有 <buttons> 都将被强制继承红色背景。接下来，你必须通过覆盖你的 <button> 元素来修复代码（并且可能会在修复中“伤及无辜” ）。
button {
background-color: red;
}
.something button {
background-color: blue;
}
如果设置了一个 .button 类的按钮，则可以在任何 <button> 元素上选择是否使用 .button 类。如果你需要一个不同的背景颜色，你所做的就是改成一个新的 class，比如说 .button--secondary
.button {
background-color: red;
}
.button--secondary {
background-color: blue;
}
这给我们引入了 BEM 的下一部分 —— 修饰符。
修饰符
修饰符是改变某个块的外观的标志。要使用修饰符，可以将 --modifier 添加到块中。
从上面的按钮示例继续，修改的按钮将被命名为 .button--secondary。
在传统的 BEM 中，当你使用修饰符时，你应该将块和修饰符添加到 HTML 中，以便在新的 .button--secondary 中不重写 .button 样式。
<button class="button">Primary button</button>
<button class="button button--secondary">Secondary button</button>
.button {
padding: 0.5em 0.75em;
background-color: red;
}
.button--secondary {
background-color: green;
}
注意为什么没有必要在 .button--secondary 中重新声明 padding，因为它已经在 .button 中声明了。
但是，我并不喜欢在HTML中再加一个 .button，因为 .button--modifier 已经告诉我，它是一个带有 --secondary 标志的 .button 。理想情况下，我的 HTML 应该是这样的：
<button class="button">Primary button</button>
<button class="button--secondary">Secondary button</button>
这更简洁
不幸的是，如果 HTML 中没有 .button，我们必须回到非简洁的 CSS：
.button {
padding: 0.5em 0.75em;
background-color: red;
}
.button--secondary {
padding: 0.5em 0.75em;
background-color: green;
}
很繁琐！
有种方法可以编写简洁的 CSS，而不需要额外的 class，那就是使用less、sass中的使用 mixin ，下面是sass的实例：
如果使用 Sass 或任何其他预处理器，则 使用mixin来封装 需要重用的 所有代码。在我们的按钮示例中，我们只需要将 padding 写入 mixin。 在这里，我在块中调用这个 mixin：
@mixin button {
padding: 0.5em 0.75em;
}
.button {
@include button;
background-color: red;
}
.button--secondary {
@include button;
background-color: green;
}
元素
元素是块的子节点。为了表明某个东西是一个元素，你需要在块名后添加 __element。所以，如果你看到一个像那样的名字，比如 form__row ，你将立即知道 .form 块中有一个 row 元素。
<form class="form" action="">
<div class="form__row">
<!-- ... -->
</div>
</form>
.form__row {
/* styles */
}
BEM 元素有两个优点 ：
- 你可以让 CSS 的优先级保持相对扁平。
- 你能立即知道哪些东西是一个子元素。
为了解释以上两点，考虑使用两个单独的 class 的替代方法（许多框架这么做的）。你可能会用这样的东西：
<form class="form" action="">
<div class="row">
<!-- ... -->
</div>
</form>
.form .row {
/* styles */
}
如果你使用 BEM 元素，则可以使用优先级为 10 而不是 20 的的选择器来为 .form__row 提供样式。此外，你可以立即分辨出（不论是在 HTML 还是 CSS 中）.form__row 是 .form__row的子节点。
有一件事你需要了解。永远不应该链式命名 BEM 元素。 如果你的 class 最终像这样 .form__row__input，你做的事情是非常错误的。
有两种方法可以绕过长长的 BEM 链式命名。 他们是：
- 只把子子元素链接到有意义的块
- 创建新的块来保存元素
链接孙元素到块
虽然 BEM 建议你将 BEM 元素写作 .block__element ，但它不会规定你的 HTML 应如何。所以，只要有意义的话，你可以把你的孙元素连在一起。
接下来是一个例子。在下面的代码中，你将看到 .article__header 是 .article 的子元素。.article__title 是 article 的孙元素（或者说是 .article__header 的子元素，如果你将它们同时表示为 .article 的子元素，就没有冲突，因为这个表单同时只有他们存在。
<article class="article">
<header class="article__header">
<h1 class="article__title"></h1>
</header>
</article>
虽然这样有效，你也会遇到无意义的链接孙元素的情况。举个例子：
<section class="comments">
<h2 class="comments__title"></h2>
<article class="comments__comment">
<h3 class="comments__comment-title"></h3>
</article>
<article class="comments__comment">
<h3 class="comments__comment-title"></h3>
</article>
<!-- ... -->
</section>
此时你需要创建新块来保存孙元素。
创建新的块来保存孙元素
在上述情况下，你可以轻松地将 .comments__comment 拆为 .comments和 .comment ：
<section class="comments">
<h2 class="comments__title"></h2>
<article class="comment">
<h3 class="comment-title"></h3>
</article>
<article class="comment">
<h3 class="comment-title"></h3>
</article>
<!-- ... -->
</section>
这更有意义，不是吗？如果你这样做，请确保将 .comments 和 .comment块放在同一个文件中，以方便参考。
在用例中添加为 BEM 添加的 —— 命名空间。
命名空间
.l-: 布局(layouts).o-: 对象(objects).c-: 组件(components).js: js的钩子(JavaScript hooks).is-|.has-: 状态类(state classes).t1|.s1: 排版大小(typography sizes).u-: 实用类(utility classes)
