本文章參考鏈接：https://blog.csdn.net/qq_27263045/article/details/79529371

1、首先CSS樣式規范性，是大多數實際項目中所必須要求的。很大程度上避免后期代碼的重構。

2、實際開發中，采用了各種方法來達到CSS樣式規范化，但效果都不明顯：

a：駝峰命名；

b：采用模塊為前綴達到區分其他模，避免重復的效果【例：scoped屬性】；

3、現在，我們來介紹一下BEM的CSS命名規范：

BEM的意思就是塊(block)、元素(element)、修飾符(modifier)。

是由Yandex團隊提出的一種前端命名方法落論。該命名方法使代碼更具可讀性和維護性，同時也讓CSS類更具有意義。

.block {}? ? ? ? ? ? ? ? ? ? ? ? //代表更高級別的抽象或組件；

.block__element {}? ? ? ? ?//代表.block的后代，用于形成一個完整的.block整體；

.block--modifier {}? ? ? ? //代表.block不同狀態或不同版本；

之所以使用兩個兩字符和下劃線而不是一個，是為了讓你自己的塊可以單個連字符來界定，例如：

.div-query {}? ? ? ? ? ? ? ? //塊

.div-query__button {}? ? //元素

.div-query--valid {}? ? ? ? //修飾符

BEM最突出的作用是顯示的告訴其他開發者某個標記是用來干什么的。通過瀏覽器HTML代碼中的class屬性，你就能夠明白模塊之間是如何關聯的：有一些僅僅是組件，有一些則是這些組件的子孫或者元素，還有一些是組件其他形態或者是修飾符：

.dog {}

.dog__tail {}

.dog--big {}

.dog__tail--long {}

.dog--big__eyes {}

頂級塊“dog”，擁有一些其他元素。例如："tail"。而“dog”也有一些修飾符，如：“big”，同時塊“dog”下的元素也有修飾符，如“long”。