css中的BEM命名规范

前言

第一次看见BEM，万脸懵逼，以前从来没有见过，而且也没人提及过，感觉这块 🈶
点被前端开发佬们给忽视掉的样子，通过对官方文档的学习，原来我们一直都在接触着BEM，只不过用着舒服，但没有去里面具体深究而已！！

那么，什么是BEM？为什么要使用BEM？如何来使用BEM呢？

在开始介绍什么是BEM之前，先来看对比看一下未使用BEM以及使用了BEM之后的效果，比如
🈶 以下的一个效果需要用css来实现出来：

👇 首先来看一下在此之前的一个常规写法：

⭐ 从 ☝ 我们可以看出这里的css其实是 🈶
不少重复的地方的，接下来进行一波优化改进：

🌟
进行了一波的优化之后，首先实现了同样的目标结果，然后将公共的部分进行了一个抽离，让每一次额外的css样式都以追加样式类的方式来加入，而且命名上也比较符合实际的运用场景！！
那么如果使用了本文所要普及的BEM之后，又会是怎样的一个结果呢？

🌠 进行了BEM化之后的样式，看起来好像 🆚
之前的增加了代码量，但这里遵循了一个规则，就是所有的button以及额外的样式都拥有了一个统一的规范，每一个叠加的样式类都仅仅维护着自身的一份属性而已

当BEM遇上了sass/less，之后，编写css样式代码将提升至从未曾
🈶 过的愉悦感以及简洁：

🌠 从 ☝ 上面可以看出，通过变量 + 嵌套 +
继承的方式来组合命名，实现样式的复用，代码上简洁干练，而且清晰易懂

从 ☝
的针对sass文件的编译输出结果可以晓得，其实它的工作过程与第二种优化的输出结果是大相径庭的，但可以享受sass编码所带来的简洁，让css样式代码更加易懂

什么是BEM

要了解什么是BEM，先从其组成成本入手

BEM的组成

BEM = Block + Element + Modifier
首先来看关于BEM的组成结构图

Block:
在html节点中可被独立的功能元素块，一般可以是header、section、menu、navigation、main、footer等元素块，它一般不受页面中的其他样式的影响的独立元素块；
Element: 一般 🈯 的是被包裹在 ☝
的Block中的孩子元素，虽然脱离了Block也可以单独运作，但一般是建议挂到Block容器视图之下；
Modifier:
对Block以及Element的标志，用以控制Blocl/Element的外观以及行为

BEM在html中元素的体现

为什么要使用BEM

其实这里从 ☝
的针对不同的css命名以及使用的对比分析，可以清楚理解到css样式的编码设计上，原来也是需要像其他编程语言一样，需要进行架构上的设计与分模块的的开发，因为当项目越来越复杂的时候，需要进行长期
维护的情况下，如果其中的css的编码维护比较散乱的话，那么对于后续假如需要比较全局的维护：比如变换主题色，统一支持到响应式布局，系统统一置灰，或者改动到某个规则，全局使用到项目中，或者是整一个UI库，
这里的调整将会是毁灭性的，假如每次都是一个个地来修改的话，那么每次都需要调整的话，工作质量与效率都是极端低下的编码工作。

以组件一辆玩具车(Block)的场景来描述，我们将玩具车拆分为为不同的零件块(Element)，每一辆机器人都可以行驶(Modifier)，每一个零件都
🈯
不同的颜色、形状(Modifier)，通过Modifier对不同的Block/Element来进行标记的话，就可以来生成出不同的玩具车

🌟 通过 ☝
玩具车的组装，将其拆分为不同零件的外观与动作的配置，让每次的外观配置(Modifier)，仅针对到各自不同的零件、玩具车进行自定义配置，每个自定义的配置可以是完全独立，且互不影响的。
👉
通过提供统一的一套命名规范，来实现原本需要在统一的位置来维护css样式代码，改造为每个独立子模块进行维护、叠加！！

如何使用BEM

要学习如何使用BEM，需要先学习关于BEM每个元素的使用规则！

Block主要是一个独立的html节点，虽然它们允许彼此嵌套，但是，还是一个独立的个体，不受其他模块影响，一般不允许使用标签来作为选择器的，这里以.main为例;

Element作为Element的孩子元素，一般用两个下划线来拼接孩子元素，则有：.main__title;

Modifier可以同时作用于Block+Element，且名称需要与其外观的名称要一致对应，这样子可以保证到所见即所得的效果，则有：.main--light、.main--dark、.main__title--mini、.main__title--normal、.main__title--large，采用不同的具有实际意义的名称来命名。