BEM 中文翻譯

BEM

原文請看 getBEM

Introduction(介紹)

• Block

  獨立實體，獨立的意義

  Examples：header, container, menu, checkbox, input

• Element

  block的一部分，沒有獨立的意義。語意上和block有關系

  Examples：menu item, list item, checkbox caption, header title

• Modifier

  block或element上的flag。使用他來改變外觀或行為

  Examples：disabled, highlighted, checked, fixed, size big, color yellow

實例

頁面上一個特定的元素在BEM中的實現。

一般情況下我們有一個正常的按鈕，還有兩個不同的狀態。因為我們使用了BEM的風格塊的類選擇器，我們可以使用任何標簽來實現(button,a,div)。命名規則告訴我們使用 block--modifier-value語法

HTML

<button class="button">
	Normal button
</button>
<button class="button button--state-success">
	Success button
</button>
<button class="button button--state-danger">
	Danger button
</button>

CSS

.button {
	display: inline-block;
	border-radius: 3px;
	padding: 7px 12px;
	border: 1px solid #D5D5D5;
	background-image: linear-gradient(#EEE, #DDD);
	font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
	color: #FFF;
	background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
	border-color: #4A993E;
}
.button--state-danger {
	color: #900;
}

優點

• 模塊化

  block樣式從來不依賴頁面上的其他元素。你還可以將blocks從已經完成的項目轉移到新的項目

• 重用性

  以不同的方式組成獨立的blocks，減少可維護css代碼量。通過一套風格，你可以使用你的超級牛叉效果構建一個庫

• 結構

  BEM方法為你的css代碼提供了一個簡單易懂的結構

Naming(命名)

正確的命名可以提高開發效率、調試和實現舊代碼中的功能。遺憾的是，大多數css沒有任何結構和命名規范。這導致時間長了css代碼不可維護。

BEM方法確保每個網站的開發人員使用單個代碼庫和同一種語言。使用正確的命名將會為你的網站設計改變做好准備

• Block

  封裝一個獨立的實體，他具有意義。雖然Block可以相互嵌套，但是在語意上讓他們保持相互的獨立，沒有優先級或層次結構。整體實體沒有DOM表示(如controllers或models)也可以是Block

  • Naming

    Block名稱可以由字母、數字和破折號組成一個類，增加一個簡短的前綴為命名空間：.block

  • HTML

    任何DOM節點如果接收一個類名他能成為一個Block。
    <div class="block">...</div>

  • CSS

    • 僅使用類名選擇器
    • 沒有標簽名或ID
    • 不依賴頁面上的其他Block/Elements

    .block { color: #042; }

• Element

  Block的一部分，沒有獨立的意義。任何元素在語意上是綁在他的Block上

  • Naming

    Elements名稱可以由字母、數字、破折號和下划線。CSS類名由Block名稱加兩個下划線加Elements名：.block__elem

  • HTML

    在給定的Block內的任何DOM都可以成為一個Elements。所有Elements在語意上相等。

    <div class="block">
      ...
      <span class="block__elem"></span>
    </div>
    

  • CSS

    • 僅使用類名選擇器
    • 沒有標簽名或ID
    • 不依賴頁面上的其他Block/Elements

    正確的

    .block__elem { color: #042; }
    

    錯誤的

    .block .block__elem { color: #042; }
    div.block__elem { color: #042; }
    

• Modifier

  在Block或Elements上的Flags，使用它們來改變外觀、行為或狀態。

  • Naming

    Modifier名稱可以由字母、數字、破折號和下划線。CSS類名由Block或Element的名稱加上兩個破折號。.block--mod或.block__elem--mod和.block--color-black與.block--color-redSpaces in complicated modifiers are replaced by dash.

  • HTML

    Modifier是添加到你的Block/Elements類名中額外的擴展。只給Block/Elements他們的修飾添加Modifier，並且保持他們原來的類
    
    

    正確的

    <div class="block block--mod">...</div>
    <div class="block block--size-big block--shadow-yes">...</div>
    

    錯誤的

    	<div class="block--mod">...</div>
    

  • CSS

    使用Modifier的類名選擇：.block--hidden { }

    改變Elements基於一個塊級Modifier:

    .block--mod .block__elem { }
    

    Elements Modifier

    .block__elem--mod { }
    

Example

假設你有一個From Block與modifierstheme: "xmas和simple: true和elementsinput、submit和元素submit他具有自己的修飾符disabled: true沒填寫表單時的樣式。

• HTML

  <form class="form form--theme-xmas form--simple">
    <input class="form__input" type="text" />
    <input
      class="form__submit form__submit--disabled"
      type="submit" />
  </form>
  

• CSS

  .form { }
  .form--theme-xmas { }
  .form--simple { }
  .form__input { }
  .form__submit { }
  .form__submit--disabled { }
  

擴展閱讀：

• MindBEMding – getting your head ’round BEM syntax 讓你的腦殼充滿BEM語法