简介
2020年，在项目中逐渐的意识到以前的bootstrap的编写规则渐渐的有点在项目中不够看了。慢慢的也开始使用起CSS模块化分层的概念，在这里还是感谢Element框架。它的源码对我在项目中的代码管理有很大帮助，对于想提升的朋友不妨一观之？
什么是BEM?
BEM是一个出色的CSS架构，虽然它看起来并不是很好看，还显得臃肿。
- B代表：Black（块）
- E代表：Element（元素）
- M代表： Modifier （修饰符）
概念非常的清晰，且和前端组件化非常的搭配。
简单使用
在BEM中一个块就是一个组件，比方说，我需要一个提交页面。里面需要一个表单块。那么它看起来是这样的
<template>
<div calss="submit-wrapper">
<form class="form">
<div class="form__item">
...item
</div>
</form>
</div>
</template>
这是一个非常简单的BEM表单案例，这是一个提交组件。submit容器。容器中有一个表单块。我门使用BEM规范定义为form，那么form就是一个块，在快里面有一个item的行，那么item就是元素。块__元素串联起来就非常好理解。利用sass，我们可以迅速的书写样式
<style lang="scss" scoped>
.submit-wrapper{
.form{
...form块
&__item{
...item样式
}
}
}
</style>
修饰符运用
前面的结构中写了块和元素的使用规则。块于元素用__双下划线做链接。而修饰符则是使用（-）横线做连接。
<template>
<div class="button-group">
<button class="button button-error"></button>
</div>
</template>
如上面的实例，我定义了一个button组，里面会有很多的button。
而button是有不同样式的所有在button按钮后添加了一个修饰符，button-error用来表示红色的按钮。作为修饰。而button-group也是一个修饰，button后面-group代表组的修饰。
总结
当项目组件化时，组件内部的class样式类管理就非常的杂乱。甚至有时候自己都不知道写到了哪里。非常的杂乱。很早以前就在寻找一份CSS架构，知道2020年年初阅读Element源码的时候，才将BEM用起来。比以前的架构优秀了很多，尤其是搭配SASS编译器的时候。使得代码非常的优雅。所以在2020年如果你不知道REM，甚至不知道CSS架构，我觉得BEM作为处女作，不妨带入到日常的习惯当中。
如果觉得不错，那么可以去学习下REM架构，并阅读Element源码，会有一个很的提升。。
