BEM是基于組件的web開發(fā)方法。其思想是將用戶界面分隔為獨立的塊，從而使開發(fā)復(fù)雜的UI界面變得更簡單和快，且不需要粘貼復(fù)制便可復(fù)用現(xiàn)有代碼。BEM由Block、Element、Modifier組成。選擇器里用以下連接符擴展他們的關(guān)系：
示例：
block-name_modifier-nameblock-name__element-name--modifier-nameblock-name_modifier-name--modifier-valueblock-name__element-name--modifier-name--modifier-value
基本概念
Block(塊)
代碼片段可能被復(fù)用且這段代碼不依賴其他組件即可用Block。塊可以互相嵌套,可以嵌套任意多層。
特點：
Element（元素）
Element是Block的一部分，沒有獨立存在的意義。任何一個Element語義上是和Block綁定的。
特點：
Modifier（修飾符）
Modifier是Block或Element上的標(biāo)記。使用它們來改變樣式，行為或狀態(tài)。與塊或元素連接符為'--'。
應(yīng)用
相對另外的Blocks定位Block
最好的方式是混合使用block和element。解決block上不能設(shè)置margin、position。
例：
<body class="page"> <!-- header and navigation--> <header class="header page__header">...</header> <!-- footer --> <footer class="footer page__footer">...</footer></body>.page__header { padding: 20px;}.page__footer { padding: 50px;}Block內(nèi)定位Elements
通過額外創(chuàng)建Block的子Element來定位嵌套。
例：
<body class="page"> <div class="page__inner"> <!-- header and navigation--> <header class="header">...</header> <!-- footer --> <footer class="footer">...</footer> </div></body>.page__inner { margin-right: auto; margin-left: auto; width: 960px;}關(guān)于命名
選擇器的命名必須完整且精確地描述它代表的BEM實體。
例：
.button {}.button__icon {}.button__text {}.button_theme_islands {}我們可直接指導(dǎo)我們在處理一個塊元素。在html使用如：
<button class="button button_theme_islands"> <span class="button__icon"></span> <span class="button__text">...</span></button>
而下面的css就很難讓我們做出相同的判斷：
.button {}.icon {}.text {}.theme_islands {}在我的git項目miniui中采用了BEM規(guī)范，使用sass實現(xiàn)了BEM。有興趣可以查看：https://github.com/banyaner/miniui
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
