這篇文章主要介紹“css中BEM的書寫規(guī)范是什么”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css中BEM的書寫規(guī)范是什么”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)制作網(wǎng)站網(wǎng)頁找三站合一網(wǎng)站制作公司,專注于網(wǎng)頁設(shè)計(jì),成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì),企業(yè)網(wǎng)站搭建,網(wǎng)站開發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為上1000+服務(wù),創(chuàng)新互聯(lián)網(wǎng)站建設(shè)將一如既往的為我們的客戶提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷推廣服務(wù)!

BEM是基于組件的web開發(fā)方法。其思想是將用戶界面分隔為獨(dú)立的塊，從而使開發(fā)復(fù)雜的UI界面變得更簡(jiǎn)單和快，且不需要粘貼復(fù)制便可復(fù)用現(xiàn)有代碼。BEM由Block、Element、Modifier組成。選擇器里用以下連接符擴(kuò)展他們的關(guān)系：

• `__：雙下劃線用來連接塊和塊的子元素

• ` ：僅作為連字符使用，連接塊或元素或修飾符的多個(gè)單詞（也可以直接寫成駝峰式）

• --：雙中劃線用來連接塊或元素的狀態(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(塊)

代碼片段可能被復(fù)用且這段代碼不依賴其他組件即可用Block。塊可以互相嵌套,可以嵌套任意多層。
特點(diǎn)：

• 塊的名稱用于描述它的目的。如 menu、button

• 塊不能影響所在環(huán)境。這意味著不能為塊設(shè)置margin或position

• 只能使用class命名選擇器，而不能使用標(biāo)簽或id選擇器

• 不依賴于頁面內(nèi)其他塊或元素

Element（元素）

Element是Block的一部分，沒有獨(dú)立存在的意義。任何一個(gè)Element語義上是和Block綁定的。

特點(diǎn)：

• 與塊使用'__'連接。 如： block__item

• 用于描述它的目的。如：item、text

• 元素可以彼此嵌套,可以嵌套任意多層

• 元素總是屬于塊的一部分。所以類似于block__item1__item2的命名是不合法的

Modifier（修飾符）

Modifier是Block或Element上的標(biāo)記。使用它們來改變樣式，行為或狀態(tài)。與塊或元素連接符為'--'。

應(yīng)用

相對(duì)另外的Blocks定位Block

最好的方式是混合使用block和element。解決block上不能設(shè)置margin、position。

例：

    
    ...

    
    ...

.page__header {
    padding: 20px;
}

.page__footer {
    padding: 50px;
}

Block內(nèi)定位Elements

通過額外創(chuàng)建Block的子Element來定位嵌套。

例：

    
      
      ...

      
      ...