css 命名規范 BEM

mushang 發布于2019-08-30 14:04 / 1476人閱讀

摘要：針對塊的類名會加一些前綴，這些前綴在中有類似命名空間的作用。每一個塊名應該有一個命名空間前綴每一條規則必須屬于一個塊。為了避免創建三個不同的塊，最好是在塊上加修飾符。的源碼當中充分實現了這種命名方式在使用的情況下

在項目的開發過程當中, 我們往往因為日益復雜的css代碼而感到力不從心. 如何合理的組織css代碼成為了我們前端開發過程中必須考慮到的環節.

在讀element源代碼的時候, 了解到了BEM的命名風格.

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

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

type-block__element--modifier

塊(block)

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

在大多數情況下，任何獨立的頁面元素（或復雜或簡單）都可以被視作一個塊。它的HTML容器會有一個唯一的CSS類名，也就是這個塊的名字。

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

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

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

元素(element)

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

修飾符(modifier)

一個“修飾符”可以理解為一個塊的特定狀態，標識著它持有一個特定的屬性。

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

element 的源碼當中充分實現了這種命名方式, 在使用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;
    }
  }
}

GPU云服務器云服務器命名規范二級域名命名規范 html的命名規范二級域名命名規范

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115755.html

CSS規范--BEM入門

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

li21 2019-08-29 12:49 評論0 收藏0
CSS命名規范

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

includecmath 2019-08-30 13:17 評論0 收藏0
css 命名規范 BEM

摘要：針對塊的類名會加一些前綴，這些前綴在中有類似命名空間的作用。每一個塊名應該有一個命名空間前綴每一條規則必須屬于一個塊。為了避免創建三個不同的塊，最好是在塊上加修飾符。的源碼當中充分實現了這種命名方式在使用的情況下在項目的開發過程當中, 我們往往因為日益復雜的css代碼而感到力不從心. 如何合理的組織css代碼成為了我們前端開發過程中必須考慮到的環節. 在讀element源代碼的時候,...

AbnerMing 2019-08-01 18:39 評論0 收藏0
好的 CSS 命名規范可以節約 Debug 時間

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

wean 2019-08-30 14:00 評論0 收藏0
BEM實戰之扒一扒淘票票頁面

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

godlong_X 2019-08-29 13:50 評論0 收藏0