溫馨提示×

溫馨提示×

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

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

css中BEM怎么書寫規(guī)范

發(fā)布時間：2023-01-13 09:24:30 來源：億速云 閱讀：98 作者：iii 欄目：開發(fā)技術(shù)

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

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

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

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

  • --：雙中劃線用來連接塊或元素的狀態(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。塊可以互相嵌套,可以嵌套任意多層。
特點：

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

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

  • 只能使用class命名選擇器，而不能使用標簽或id選擇器

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

Element（元素）

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

特點：

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

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

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

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

Modifier（修飾符）

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

應(yīng)用

相對另外的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實體。

例：

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

我們可直接指導(dǎo)我們在處理一個塊元素。在html使用如：

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

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

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

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

css的全稱是什么

css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。

關(guān)于“css中BEM怎么書寫規(guī)范”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

向AI問一下細節(jié)

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

AI
助
手