亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解css BEM書寫規(guī)范

  發(fā)布時(shí)間：2018-12-17 15:24:16   作者：midsummer   我要評(píng)論
BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團(tuán)隊(duì)提出的一種前端命名方法論。本文主要介紹了詳解css BEM書寫規(guī)范,非常具有實(shí)用價(jià)值，需要的朋友可以參考下

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選擇器
  • 不依賴于頁(yè)面內(nèi)其他塊或元素

Element（元素）

Element是Block的一部分，沒有獨(dú)立存在的意義。任何一個(gè)Element語(yǔ)義上是和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。有興趣可以查看：https://github.com/banyaner/miniui

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • CSS使用BEM命名規(guī)范實(shí)踐

    這篇文章主要介紹了CSS使用BEM命名規(guī)范實(shí)踐,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-28

  • CSS樣式書寫順序和命名規(guī)范及注意事項(xiàng)

    這篇文章主要介紹了CSS樣式書寫順序和命名規(guī)范,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-06-04

  • 值得收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則

    本文是小編精心給大家收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則 ，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2018-10-19

  • 好的 CSS 命名規(guī)范可以節(jié)約 Debug 時(shí)間

    Debug CSS 是一種很耗時(shí)的操作，如果有良好的命名規(guī)范可以節(jié)約很多的 Debug 時(shí)間。下面通過本文給大家?guī)砹薈SS 命名規(guī)范可以節(jié)約 Debug 時(shí)間的相關(guān)知識(shí)，感興趣的朋友一起
    2018-01-23

  • css 命名：BEM, scoped css, css modules 與 css-in-js詳解

    這篇文章主要介紹了css 命名：BEM, scoped css, css modules 與 css-in-js的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，,需要的朋友
    2020-08-24

  • CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解

    這篇文章主要介紹了CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-06-28

  • 從QQtabBar看css命名規(guī)范BEM的詳細(xì)介紹

    這篇文章主要介紹了從QQtabBar看css命名規(guī)范BEM的問題解析，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2021-08-04

最新評(píng)論