我查看了许多项目的样式表，发现大多数css的类名都是这样的
.table-header-wrapper
.table-group
还有一些同学会这样写，不过，最流行的css框架bootstrap的命名规范不太推荐这种写法。
.table_header_wraper
.tableHeaderWrapper
公司的项目使用了vue + element-ui，在查看 element-ui 组件的样式表时，我发现这样命名方式
.el-table__header-wrapper
.el-table--group
一开始我没太注意，后来在查看vue的相关文档时，看到其中提到 BEM 和 CSS Modules，查阅相关资料后，发现上面 element-ui 的命名方式正是源于BEM。
接下来就简单介绍一下BEM
什么是BEM
BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。
BEM可以帮我们解决的问题
在编写css的过程中，我们经常遇到的问题就是样式冲突，尤其是当我们重新修改样式的时候。由于我们没有统一的命名规范，大多数样式都是类的嵌套，很容易遇到相同的类名，为了解决冲突，我们又加入了许多新的类名，抛弃了可以复用的css样式，最后的结果是，我们的css文件越来越大，越来越难以维护。
所以，为了
- 提高css的可维护性，
- 减少样式冲突，
- 优化css代码，
我们可以在一开始就按照一套规范来书写css，BEM正是一个值得参考的选择。
如何使用
.block{}
.block__element{}
.block--modifier{}
- block，我们可以将其理解为vue中的组件，组件与组件是可以相互嵌套的，每一个组件的名字是不同的，
- element，是块中的元素，这里的元素并不是html元素，而是块中的上下文，也就是组件中的不同区域
- modifier，是修饰符，用于表述块或元素的不同状态
来看下面一个例子
<form class="search full">
<input type="text" class="field">
<input type="Submit" value ="Search" class="button">
</form>
常规的写法是这样的
.search{}
.full{}
.field{}
.button{}
我们只知道每个类的单独样式，但无法看出他们之间有任何的关系，一旦我们修改field，就会影响所有的这个类的input
采用BEM的写法如下
<form class="box-search box-search--full">
<input type="text" class="box-search__field">
<input type="Submit" value ="Search" class="box_search__button">
</form>
.box-search{}
.box-search--full{}
.box-search__field{}
.box-search__button{}
从这里我们可以看出，box-search是一个搜索组件，内部有一个box-search__field表示搜索内容输入框，和一个box-search__button搜索按钮，box-search--full描述了这个搜索组件某个状态下的特殊样式。每一个组件都有自己的私有状态，我们这样命名，在<style scoped></style>里又可以少写很多代码了。
需要说明的几点
- 我们不一定要在所有的地方都使用BEM，如下我们有一个全局大写样式，它可以不属于任何block
.caps{ text-transform:uppercase; }
我们可以稍稍修改一下，将它当成一个修饰符，或者加一个不存在的块global
.--caps{text-transform:uppercase;}
.global__caps{text-transform:uppercase;}
不一定完全按照它的要求来写，我们可以根据自己的项目实际需求加以改造
- 以上只是个人对BEM的简单介绍，理解错误之处还望指正，关于它更多的思想请移步BEM
参考文章
https://www.cnblogs.com/dujishi/p/5862911.html
https://www.w3cplus.com/css/bem-definitions.html
网友评论