好程式設計師分享Css詳解bem書寫規範
好程式設計師分享Css詳解bem書寫規範,bem 是基於元件的 web開發方法。其思想是將使用者介面分隔為獨立的塊,從而使開發複雜的UI介面變得更簡單和快,且不需要貼上複製便可複用現有程式碼。BEM由Block、Element、Modifier組成。選擇器裡用以下連線符擴充套件他們的關係:
- `__:雙下劃線用來連線塊和塊的子元素
- ` :僅作為連字元使用,連線塊或元素或修飾符的多個單詞(也可以直接寫成駝峰式)
- --:雙中劃線用來連線塊或元素的狀態(也可使用‘_’單下劃線表示)
示例:
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
- 塊不能影響所在環境。這意味著不能為塊設定 margin或position
- 只能使用 class命名選擇器,而不能使用標籤或id選擇器
- 不依賴於頁面內其他塊或元素
Element(元素)
Element是Block的一部分,沒有獨立存在的意義。任何一個Element語義上是和Block繫結的。
特點:
- 與塊使用 '__'連線。 如: block__item
- 用於描述它的目的。如: item、text
- 元素可以彼此巢狀 ,可以巢狀任意多層
- 元素總是屬於塊的一部分。所以類似於 block__item1__item2的命名是不合法的
Modifier(修飾符)
Modifier是Block或Element上的標記。使用它們來改變樣式,行為或狀態。與塊或元素連線符為'--'。
應用
相對另外的 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
透過額外建立 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 {}
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2651498/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- css BEM書寫規範CSS
- 好程式設計師分享如何看待CSS中BEM的命名方式?程式設計師CSS
- [規範] CSS BEMCSS
- CSS — BEM 命名規範CSS
- css 命名規範 BEMCSS
- css書寫規範CSS
- CSS規範須知——快速瞭解BEMCSS
- HTML、CSS程式碼書寫規範HTMLCSS
- 好程式設計師web前端分享值得參考的css理論:OOCSS、SMACSS與BEM程式設計師Web前端CSSMac
- 好程式設計師Java分享Java開發常用規範技巧一程式設計師Java
- 用BEM命名規範組織CSS程式碼CSS
- 好程式設計師web前端分享css常用屬性縮寫程式設計師Web前端CSS
- 好程式設計師分享placeholder屬性詳解程式設計師
- css命名和書寫規範CSS
- css書寫和命名規範CSS
- html和css書寫規範HTMLCSS
- CSS 樣式書寫規範CSS
- CSS命名及書寫規範CSS
- 好程式設計師Java培訓分享For迴圈詳解程式設計師Java
- 好程式設計師Web前端分享前端CSS篇程式設計師Web前端CSS
- 好程式設計師web前端教程分享CSS技巧!程式設計師Web前端CSS
- 好程式設計師分享JavaScript六種繼承方式詳解程式設計師JavaScript繼承
- 程式碼書寫規範
- 好程式設計師web前端分享CSS元素型別程式設計師Web前端CSS型別
- 好程式設計師web前端分享CSS基礎篇程式設計師Web前端CSS
- 好程式設計師Python培訓分享For迴圈用法詳解程式設計師Python
- 好程式設計師web前端培訓分享怎樣學好css?程式設計師Web前端CSS
- 好程式設計師web前端分享css初始化程式碼程式設計師Web前端CSS
- 談談BEM規範(含程式碼)
- C++程式碼書寫規範——給新手程式設計師的一些建議C++程式設計師
- 好程式設計師web前端分享CSS3 漸變程式設計師Web前端CSSS3
- 好程式設計師web前端分享主流CSS image比較程式設計師Web前端CSS
- 好程式設計師web前端技術分享css盒模型程式設計師Web前端CSS模型
- 好程式設計師Java教程分享詳細瞭解Javasax解析器程式設計師Java
- 好程式設計師Java學習路線分享finalize()方法詳解程式設計師Java
- 好程式設計師分享JavaScript名稱空間模式例項詳解程式設計師JavaScript模式
- 好程式設計師web前端學習路線分享Jsonp詳解程式設計師Web前端JSON
- 好程式設計師大資料學習路線分享AWK詳解程式設計師大資料