bem的意思就是塊（block）、元素（element）、修飾符（modifier）,是由yandex團隊提出的一種前端命名方**。這種巧妙的命名方法讓你的css類對其他開發者來說更加透明而且更有意義。bem命名約定更加嚴格，而且包含更多的資訊，它們用於乙個團隊開發乙個耗時的大專案。
重要的是要注意，我使用的基於bem的命名方式是經過nicolas gallagher修改過的。這篇文章中介紹的這種命名技術並不是原始的bem，但卻是乙個我更喜歡的改進版。無論實際使用了什麼樣的符號，它們其實都是基於同樣的bem原則。
命名約定的模式如下：
.block{}
.block__element{}
.block--modifier{}
之所以使用兩個連字元和下劃線而不是乙個，是為了讓你自己的塊可以用單個連字元來界定，如：
.site-search{} /* 塊 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修飾符 */
bem的關鍵是光憑名字就可以告訴其他開發者某個標記是用來幹什麼的。通過瀏覽html**中的class屬性，你就能夠明白模組之間是如何關聯的：有一些僅僅是元件，有一些則是這些元件的子孫或者是元素,還有一些是元件的其他形態或者是修飾符。我們用乙個模擬/模型來思考一下下面的這些元素是怎麼關聯的：
.person{}
.person__hand{}
.person--female{}
.person--female__hand{}
.person__hand--left{}
頂級塊是『person』，它擁有一些元素，如『hand』。乙個人也會有其他形態，比如女性，這種形態進而也會擁有它自己的元素。下面我們把他們寫成『常規』css:
.person{}
.hand{}
.female{}
.female-hand{}
.left-hand{}
這些『常規』css都是有意義的，但是它們之間卻有些脫節。就拿.female來說，是指女性人類還是某種雌性的動物？還有.hand，是在說乙隻鐘錶的指標（譯註：英文中hand有指標的意思）？還是乙隻正在玩紙牌的手？使用bem我們可以獲得更多的描述和更加清晰的結構，單單通過我們**中的命名就能知道元素之間的關聯。bem真是強大。
再來看乙個之前用『常規』方式命名的.site-search的例子：
這些css類名真是太不精確了，並不能告訴我們足夠的資訊。儘管我們可以用它們來完成工作，但它們確實非常含糊不清。用bem記號法就會是下面這個樣子：
我們能清晰地看到有個叫.site-search的塊，他內部是乙個叫.site-search__field的元素。並且.site-search還有另外一種形態叫.site-search--full。
foo corp is the best, seriously!
我們立馬就能明白.media是乙個塊，.media__img--rev是乙個加了修飾符的.media__img的變體，它是屬於.media的元素。而.media__body是乙個尚未被改變過的也是屬於.media的元素。所有以上這些資訊都通過它們的class名稱就能明白，由此看來bem確實非常實用。
bem 命名規範
bem代表 塊 block 元素 element 修飾符 modifier 我們常用這三個實體開發元件。在選擇器中，由以下三種符號來表示擴充套件的關係 中劃線 僅作為連字元使用，表示某個塊或者某個子元素的多單詞之間的連線記號。雙下劃線 雙下劃線用來連線塊和塊的子元素 單下劃線 單下劃線用來描述乙個塊...
CSS命名 BEM方法
bem 是塊 block 元素 element 修飾符 modifier 的簡寫，利用不同的區塊，功能以及樣式來給元素命名。官網原文表述。bem方法通過使用混合或建立額外的塊元素來達到相同的結果。您不需要建立額外的抽象包裝器。相對於其他塊定位乙個塊 設定乙個塊元素相對於其他塊元素的位置，最好的方法通...
BEM的命名規範
css 的命名規範又叫做bem規範，為的是結束混亂的命名方式，達到乙個語義化的css命名方式。bem是三個單詞的縮寫 block 塊 代表更高階別的抽象或元件，element 元素 block的後代，以及modifier 修飾 不同狀態的修飾符。命名方法 block element modifier...