溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中BEM書寫規(guī)范的示例分析

發(fā)布時(shí)間：2021-06-17 10:56:22 來源：億速云 閱讀：224 作者：小新 欄目：web開發(fā)

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

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。

例：

<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內(nèi)定位Elements

通過額外創(chuàng)建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;
}

關(guān)于命名

選擇器的命名必須完整且精確地描述它代表的BEM實(shí)體。

例：

.button {}
.button__icon {}
.button__text {}
.button_theme_islands {}

我們可直接指導(dǎo)我們?cè)谔幚硪粋€(gè)塊元素。在html使用如：

<button class="button button_theme_islands">
    <span class="button__icon"></span>

    <span class="button__text">...</span>
</button>

而下面的css就很難讓我們做出相同的判斷：

.button {}
.icon {}
.text {}
.theme_islands {}

在我的git項(xiàng)目miniui中采用了BEM規(guī)范，使用sass實(shí)現(xiàn)了BEM。

感謝各位的閱讀！關(guān)于“css中BEM書寫規(guī)范的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手