好程序員分享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 {}