必知必會的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源碼，會有一個很的提高。。