css规则中区块block,CSS的命名方式:BEM(区块、元素、修饰符)
原標題：CSS的命名方式:BEM(區塊、元素、修飾符)
本資源由 伯樂在線- 凝楓整理，您也想貢獻一份力量？歡迎加入我們 ?
重要概念
“Block”區塊
區塊的定義是：一個邏輯和功能兼備的獨立頁面組件，也可以稱為web組件。一個區塊包含有行為(JS)、模板、樣式(CSS)以及其他實現方法。由于區塊有獨立性，所以允許被重用，也可以適當促進項目開發的進程。
區塊屬性
嵌套結構
區塊之間可被嵌套使用，例如：head區塊可以包含一個logo (logo) 、一個搜索表單 (search) 、以及一個認證模塊 (auth) 。
隨意處置
區塊可以被放在頁面的任何位置，也可以在頁面或者項目之間相互移動。區塊的實現靠的是獨立的實體，所以允許開發著放在改變其位置，保證整體的功能和外觀的效果。也就是說，不需要修改CSS或者任何JS代碼，就可以讓logo和認證表單兩塊交換位置。
重用
允許多個相同的區塊實例同時存在于一個界面里。
“Element”元素
元素的定義是： 區塊中無法被用在其他組件上的部分，例如：某個菜單子項是無法用于菜單區塊以外的地方的，所以它屬于元素。
區塊還是元素，我到底該選哪個？
BEM方法不建議元素之間嵌套
“Modifier”修飾符
區塊或者元素的外觀樣式和行為，稱為BEM實體。
是否使用修飾符，你可以自由選擇。修飾符本質上和HTML的屬性類似，相同的區塊因為其使用的修飾符不同而不盡相同。例如：菜單區塊的外觀可能會因為其所依賴的修飾符變化而發生改變。
BEM實體
區塊、元素、以及修飾符統稱為BEM實體，這個概念既可以用于一個單獨的BEM實體，也可以作為區塊、元素和修飾符的整體概念。
混合體
即不同的BEM實體實例寄主于一個DOM節點上。
它能幫我們
在不復制代碼的情況下，組合多個BEM實體的行為和樣式在已存在的BEM實體的基礎上，創建有語義的新的界面組件
讓我們來看看這樣的情況：假設代碼里的鏈接都是通過一個 link區塊實現的，現在，我們需要把菜單項都轉為鏈接，有幾種方法可以實現：
新建一個修飾符，通過它把菜單項一個個轉換為鏈接。不過這樣實現起來，就不可避免地需要復制這個 link區塊的行為和樣式，代碼就會重復；利用一個混合體，把一個一般 link區塊和一個 menu區塊里的 link元素結合起來，在不復制代碼之余，組合了兩者的混合體又能保留它們各自的基礎功能( link的鏈接以及 menu的CSS規則)。
BEM樹
BEM樹是一種由區塊、元素和修飾符組成的網頁結構，相對于DOM樹(能表示BEM實體及其狀態、排序、嵌套、附加代碼等)來說，BEM樹更像一種抽象概念。在實際項目中，BEM樹可能以任何形式出現在樹狀結構里。讓我們看看這個DOM樹的例子：
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
en
ru
對應的BEM樹則是：
1
2
3
4
5
6
7
8
9
10
header
├──logo
└──search-form
├──input
└──button
└──lang-switcher
└──lang-switcher__item
└──lang-switcher__link
└──lang-switcher__item
└──lang-switcher__link
對于同一個BEM樹，XML 和BEMJSON的表達方式略有不同：
XML
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
BEMJSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
block:'header',
content:[
{block:'logo'},
{
block:'search-form',
content:[
{block:'input'},
{block:'button'}
]
},
{
block:'lang-switcher',
content:[
{
elem:'item',
content:[
{elem:'link'}
]
},
{
elem:'item',
content:[
{elem:'link'}
]
}
]
}
]
}
區塊實現
不同的技術方法都可以決定一個BEM實體：
行為外觀測試模板文本依賴性描述附加數據(如圖像)
實現技術
即用于實現區塊的技術方法。
區塊可以通過一種或多種方式實現，例如：
行為 — Java、Coffee外觀 — CSS、Stylus、Sass模板 — BEMHTML、BH、Pug、Handlebars、XSL文本 — Markdown、Wiki、XML
比如，一個區塊的外觀由CSS控制，也就可以說這個區塊是用CSS技術實現的。同理，這個區塊的文檔由Markdown編寫，就可以說這個區塊也是用Markdown技術實現的。
區塊重定義
即通過在不同級別上添加新的功能來修改區塊實現方式。
重定義等級
即一系列BEM實體及其部分實現方式。
區塊的最終實現方式可分為不同的重定義等級，每個新的等級擴展或覆蓋的原有的實現方式，最終結果就是——該區塊由各自獨立的實現技術集合而成，并且其重定義等級都以預先指定的順序排列。
BEM實體的任一實現方式都可以被重定義。例如，有個第三方的庫在一個單獨的級別上鏈接到項目中，這個庫包含了一些現成的區塊實現，而項目特有的區塊則被放置在另一個重定義等級里。假如現在我們需要修改庫中某個區塊的樣式，那么，不必修改庫代碼或者副本中的CSS，只需要在項目級別編寫新的CSS規則即可。在編譯過程中，最終的實現將會結合庫原本的代碼以及項目中的新代碼兩者的效果。
如果你在文中發現了任何錯誤，或者有需要幫助的地方，不要猶豫，請在GitHub上聯系我們，或者在prose.io.發表勘誤文章也是可以的。
官方網站：https://en.bem.info/返回搜狐，查看更多
責任編輯：
總結
以上是生活随笔為你收集整理的css规则中区块block,CSS的命名方式:BEM(区块、元素、修饰符)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我让客户回去给内存条通电，客户就这么给内
- 下一篇： python多线程爬取视频python多