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语法