最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

這篇文章給大家分享的是有關(guān)css中BEM書(shū)寫(xiě)規(guī)范的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

10年積累的做網(wǎng)站、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有潮安免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

• `__：雙下劃線用來(lái)連接塊和塊的子元素

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

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

• 塊的名稱(chēng)用于描述它的目的。如 menu、button

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

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

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

Element（元素）

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

特點(diǎn)：

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

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

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

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

Modifier（修飾符）

Modifier是Block或Element上的標(biāo)記。使用它們來(lái)改變樣式，行為或狀態(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

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

例：

    
      
      ...

      
      ...