BEM

原文请看 getBEM

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代码提供了一个简单易懂的结构

正确的命名可以提高开发效率、调试和实现旧代码中的功能。遗憾的是，大多数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
  正确的
```
css .block__elem { color: #042; }
```
  错误的
```
css .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-red
```
  Spaces 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与modifiers

theme: "xmas

和

simple: true

和elements

input

、

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 { }

扩展阅读：

让你的脑壳充满BEM语法

来源：51CTO

作者：南京闫伟亮的野爹

链接：https://blog.csdn.net/Wangxinlei_King/article/details/100734826

标签

按钮

bem

block

button样式

css

css样式

BEM 中文翻译

BEM

Example