成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css 命名規(guī)范 BEM

AbnerMing / 1277人閱讀

摘要：針對(duì)塊的類名會(huì)加一些前綴，這些前綴在中有類似命名空間的作用。每一個(gè)塊名應(yīng)該有一個(gè)命名空間前綴每一條規(guī)則必須屬于一個(gè)塊。為了避免創(chuàng)建三個(gè)不同的塊，最好是在塊上加修飾符。的源碼當(dāng)中充分實(shí)現(xiàn)了這種命名方式在使用的情況下

在項(xiàng)目的開發(fā)過程當(dāng)中, 我們往往因?yàn)槿找鎻?fù)雜的css代碼而感到力不從心. 如何合理的組織css代碼成為了我們前端開發(fā)過程中必須考慮到的環(huán)節(jié).

在讀element源代碼的時(shí)候, 了解到了BEM的命名風(fēng)格.

使用 BEM 命名規(guī)范，理論上講，每行 css 代碼都只有一個(gè)選擇器。
BEM代表 “塊（block）,元素（element）,修飾符（modifier）”,我們常用這三個(gè)實(shí)體開發(fā)組件。
在選擇器中，由以下三種符號(hào)來表示擴(kuò)展的關(guān)系：

-   中劃線 ：僅作為連字符使用，表示某個(gè)塊或者某個(gè)子元素的多單詞之間的連接記號(hào)。
--  雙中劃線線：用來描述一個(gè)塊或者塊的子元素的一種狀態(tài)
__  雙下劃線：雙下劃線用來連接塊和塊的子元素

type-block__element--modifier

塊(block)

一個(gè)塊是設(shè)計(jì)或布局的一部分，它有具體且唯一地意義 ，要么是語義上的要么是視覺上的。

在大多數(shù)情況下，任何獨(dú)立的頁面元素（或復(fù)雜或簡(jiǎn)單）都可以被視作一個(gè)塊。它的HTML容器會(huì)有一個(gè)唯一的CSS類名，也就是這個(gè)塊的名字。

針對(duì)塊的CSS類名會(huì)加一些前綴（ ui-），這些前綴在CSS中有類似 命名空間 的作用。

一個(gè)塊的正式（實(shí)際上是半正式的）定義有下面三個(gè)基本原則：

CSS中只能使用類名（不能是ID）。
每一個(gè)塊名應(yīng)該有一個(gè)命名空間（前綴）
每一條CSS規(guī)則必須屬于一個(gè)塊。

元素(element)

塊中的子元素是塊的子元素，并且子元素的子元素在 bem 里也被認(rèn)為是塊的直接子元素。一個(gè)塊中元素的類名必須用父級(jí)塊的名稱作為前綴。

修飾符(modifier)

一個(gè)“修飾符”可以理解為一個(gè)塊的特定狀態(tài)，標(biāo)識(shí)著它持有一個(gè)特定的屬性。

用一個(gè)例子來解釋最好不過了。一個(gè)表示按鈕的塊默認(rèn)有三個(gè)大?。盒?，中，大。為了避免創(chuàng)建三個(gè)不同的塊，最好是在塊上加修飾符。這個(gè)修飾符應(yīng)該有個(gè)名字（比如：size ）和值（ small，normal 或者 big ）。

element 的源碼當(dāng)中充分實(shí)現(xiàn)了這種命名方式, 在使用scss的情況下

/* BEM
 -------------------------- */
@mixin b($block) {
  $B: $namespace+"-"+$block !global;

  .#{$B} {
    @content;
  }
}

@mixin e($element) {
  $E: $element !global;
  $selector: &;
  $currentSelector: "";
  @each $unit in $element {
    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

@mixin m($modifier) {
  $selector: &;
  $currentSelector: "";
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51920.html

相關(guān)文章

  • CSS規(guī)范--BEM入門

    摘要：一開始，公司推出的，包括了規(guī)范以及其配套構(gòu)建工具。代表的不同狀態(tài)或不同版本。再來看一個(gè)之前用常規(guī)方式命名的的例子這些類名真是太不精確了，并不能告訴我們足夠的信息。 這段時(shí)間在整理前端部分的代碼規(guī)范，前面提到的CSS規(guī)范里面會(huì)涉及到選擇器的命名，就參考BEM的命名規(guī)范，內(nèi)容整理如下，供大家參考，請(qǐng)斧正！如大家有興趣，可移步至CSS編碼規(guī)范 BEM是由Yandex公司推出的一套CSS命名...

    li21 評(píng)論0 收藏0

  • CSS命名規(guī)范

    摘要：本篇介紹幾種命名規(guī)范。使用的網(wǎng)站四其他命名規(guī)范等減少對(duì)結(jié)構(gòu)的依賴增加重復(fù)性的使用幾種命名規(guī)范比較與在命名上相反的點(diǎn)可以放心使用，以為都是在模塊內(nèi)但不推薦當(dāng)前我們的網(wǎng)站略有思想更概括，中的，相當(dāng)于的，相當(dāng)于的，相當(dāng)于的中文 本篇介紹幾種CSS命名規(guī)范。 （規(guī)范詳細(xì)請(qǐng)參考底部References) 一、NEC (nice easy css) 網(wǎng)易前端CSS開源項(xiàng)目 1.1 樣式分類 重...

    includecmath 評(píng)論0 收藏0

  • css 命名規(guī)范 BEM

    摘要：針對(duì)塊的類名會(huì)加一些前綴，這些前綴在中有類似命名空間的作用。每一個(gè)塊名應(yīng)該有一個(gè)命名空間前綴每一條規(guī)則必須屬于一個(gè)塊。為了避免創(chuàng)建三個(gè)不同的塊，最好是在塊上加修飾符。的源碼當(dāng)中充分實(shí)現(xiàn)了這種命名方式在使用的情況下 在項(xiàng)目的開發(fā)過程當(dāng)中, 我們往往因?yàn)槿找鎻?fù)雜的css代碼而感到力不從心. 如何合理的組織css代碼成為了我們前端開發(fā)過程中必須考慮到的環(huán)節(jié). 在讀element源代碼的時(shí)候,...

    mushang 評(píng)論0 收藏0

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

    摘要：簡(jiǎn)評(píng)是一種很耗時(shí)的操作，如果有良好的命名規(guī)范可以節(jié)約很多的時(shí)間。一些團(tuán)隊(duì)使用連字符分隔符，而其他團(tuán)隊(duì)則傾向于使用更加結(jié)構(gòu)化的稱為的命名規(guī)范。一般來說，命名規(guī)范有三個(gè)問題要解決能夠通過名字就能清楚選擇器的功能。 簡(jiǎn)評(píng)：Debug CSS 是一種很耗時(shí)的操作，如果有良好的命名規(guī)范可以節(jié)約很多的 Debug 時(shí)間。 使用連字符（-）分隔字符串 你可能習(xí)慣了在 Javascript 中使用小駝...

    wean 評(píng)論0 收藏0

  • BEM實(shí)戰(zhàn)之扒一扒淘票票頁面

    摘要：扒一扒淘票票界面淘票票界面寫的挺美觀的，但是最近看了看淘票票的命名方式，覺得稍有不妥。命名與頁面內(nèi)容掛鉤，代碼復(fù)用性低。 BEM解析 BEM是一套CSS國(guó)際命名規(guī)范，是一個(gè)非常有用的功能強(qiáng)大且簡(jiǎn)單的命名約定，它能使前端代碼更易讀，易于理解易于擴(kuò)展。BEM是塊（block）、元素（element）、修飾符（modifier）的縮寫。 B：Block是塊，一個(gè)獨(dú)立的組件，將所有東西都劃分...

    godlong_X 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<