BEM的命名規(guī)范是什么

這篇文章主要介紹“BEM的命名規(guī)范是什么”，在日常操作中，相信很多人在BEM的命名規(guī)范是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”BEM的命名規(guī)范是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

　　什么是BEM命名規(guī)范

　　Bem是塊（block）、元素（element）、修飾符（modifier）的簡寫，由Yandex團(tuán)隊提出的一種前端CSS命名方法論。

　　BEM是一個簡單又非常有用的命名約定。讓你的前端代碼更容易閱讀和理解，更容易協(xié)作，更容易控制，更加健壯和明確，而且更加嚴(yán)密。

　　BEM命名模式

　　BEM命名約定的模式是：

　　.block{}

　　.block__element{}

　　.block--modifier{}

　　block代表了更高級別的抽象或組件。

　　block__element代表.block的后代，用于形成一個完整的.block的整體。

　　block--modifier代表.block的不同狀態(tài)或不同版本。

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

　　.sub-block__element{}

　　.sub-block--modifier{}

　　BEM命名法的好處

　　BEM的關(guān)鍵是，可以獲得更多的描述和更加清晰的結(jié)構(gòu)，從其名字可以知道某個標(biāo)記的含義。于是，通過查看HTML代碼中的class屬性，就能知道元素之間的關(guān)聯(lián)。

　　使用BEM命名規(guī)范的示例：

　　復(fù)制代碼

　　<divclass="article">

　　<divclass="article__body">

　　<divclass="tag"></div>

　　<buttonclass="article__button--primary"></button>

　　<buttonclass="article__button--success"></button>

　　</div>

　　</div>

　　復(fù)制代碼

到此，關(guān)于“BEM的命名規(guī)范是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>