什么是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源码的时候，才将REM用起来。比以前的架构优秀了很多，尤其是搭配SASS编译器的时候。使得代码非常的优雅。所以在2020年如果你不知道REM，甚至不知道CSS架构，我觉得REM作为处女作，不妨带入到日常的习惯当中。