詳解css BEM書寫規(guī)范
我要評論BEM是基于組件的web開發(fā)方法。其思想是將用戶界面分隔為獨立的塊，從而使開發(fā)復雜的UI界面變得更簡單和快，且不需要粘貼復制便可復用現(xiàn)有代碼。BEM由Block、Element、Modifier組成。選擇器里用以下連接符擴展他們的關系：
- `__：雙下劃線用來連接塊和塊的子元素
- ` ：僅作為連字符使用，連接塊或元素或修飾符的多個單詞（也可以直接寫成駝峰式）
- --：雙中劃線用來連接塊或元素的狀態(tài)（也可使用‘_’單下劃線表示）
示例：
block-name_modifier-name block-name__element-name--modifier-name block-name_modifier-name--modifier-value block-name__element-name--modifier-name--modifier-value
基本概念
Block(塊)
代碼片段可能被復用且這段代碼不依賴其他組件即可用Block。塊可以互相嵌套,可以嵌套任意多層。
特點：
- 塊的名稱用于描述它的目的。如 menu、button
- 塊不能影響所在環(huán)境。這意味著不能為塊設置margin或position
- 只能使用class命名選擇器，而不能使用標簽或id選擇器
- 不依賴于頁面內其他塊或元素
Element（元素）
Element是Block的一部分，沒有獨立存在的意義。任何一個Element語義上是和Block綁定的。
特點：
- 與塊使用'__'連接。 如： block__item
- 用于描述它的目的。如：item、text
- 元素可以彼此嵌套,可以嵌套任意多層
- 元素總是屬于塊的一部分。所以類似于block__item1__item2的命名是不合法的
Modifier（修飾符）
Modifier是Block或Element上的標記。使用它們來改變樣式，行為或狀態(tài)。與塊或元素連接符為'--'。
應用
相對另外的Blocks定位Block
最好的方式是混合使用block和element。解決block上不能設置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內定位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;
}
關于命名
選擇器的命名必須完整且精確地描述它代表的BEM實體。
例：
.button {}
.button__icon {}
.button__text {}
.button_theme_islands {}
我們可直接指導我們在處理一個塊元素。在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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
- 這篇文章主要介紹了CSS使用BEM命名規(guī)范實踐,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-28
- 這篇文章主要介紹了CSS樣式書寫順序和命名規(guī)范,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-04
值得收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則
本文是小編精心給大家收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則 ，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-10-19
好的 CSS 命名規(guī)范可以節(jié)約 Debug 時間
Debug CSS 是一種很耗時的操作，如果有良好的命名規(guī)范可以節(jié)約很多的 Debug 時間。下面通過本文給大家?guī)砹薈SS 命名規(guī)范可以節(jié)約 Debug 時間的相關知識，感興趣的朋友一起2018-01-23css 命名：BEM, scoped css, css modules 與 css-in-js詳解
這篇文章主要介紹了css 命名：BEM, scoped css, css modules 與 css-in-js的相關知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，,需要的朋友2020-08-24
CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解
這篇文章主要介紹了CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-28
從QQtabBar看css命名規(guī)范BEM的詳細介紹
這篇文章主要介紹了從QQtabBar看css命名規(guī)范BEM的問題解析，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-08-04
