必知必会的CSS模块化架构之BEM

https://juejin.im/post/5e638027e51d45270e2130a9

简介

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源码，会有一个很的提高。。