BEM 规范

发表于 | 更新于: | 分类于 | 阅读次数:
字数统计: 751

Block，Element 和 Modifiers

简介

BEM 含义 例子
Block 独立实体，它本身就是有意义的 header,container,menu,checkbox,input
Element 块的一部分，没有独立含义，并且在语义上与其块相关联 menu item,list item,checkbox caption,header title
Modifiers 块或元素上的标志。使用它们来改变外观或行为 disabled,highlighted,checked,fixed,size big,color yellow

优点：

  • 模块化：块样式永远不会依赖页面上的其他元素，不会遇到级联问题
  • 可重用性：以不同方式组合块，并智能重用它们，减少了必须维护的 CSS 代码量
  • 结构体：BEM方法为CSS 代码提供了一个简单易懂的结构

用法以及特点

Block

封装一个独立的实体，本省是有意义的，虽然块相互嵌套并相互交互，但在语义上它们保持相等，没有优先权或等级制度。没有 DOM 表示的整体实体（例如控制器或者模型）也可以是块。

命名

块的名称可以包含 拉丁字母，数字和短划线。要形成 CSS 类，要为 namespacing 添加一个简短的前缀：block。

HTML

如果接受类名，则任何 DOM 节点都可以是块。

1
<div class="block">...</div>

CSS

  • 仅使用类名选择器
  • 没有标签名称或 ID
  • 不依赖页面上的其他块/元素
1
.block{ color: #ff9; }

Element

块的一部分并没有独立的含义，任何元素在语义上与其块相关联

命名

元素的名称可以包含拉丁字母，数字，短划线和下划线。CSS 类形成块名称加上两个下划线加上元素名称：.block__elem

HTML

块中更多任何 DOM 节点都可以是元素，在给定块内，所有元素在语义上都是相等的。

1
2
3
<div class="block">
    <span class="block__elem"></span>
</div>

CSS

  • 仅使用类名称选择器
  • 没有标签名称或ID
  • 不依赖页面上的其他块/元素
1
2
3
4
5
/* 好 */
.block__elem { color: #ff9 }
/* 坏 */
.block .block__elem { color: #ff9 }
		div.block__elem { color: #ff9 }

Modifier

块或元素上的标志，使用它们来改变外观，行为或状态

命名

修饰符名称可以包含拉丁字母，数字，段划线或下划线，CSS类形成块的或元素的名称机上两个破折号：block--mod或是 block__elem--mod 和 block--color--black与 .block--color--red .复杂修改器中的空格由短划线替换。

HTML

修饰符是添加到块/元素 DOM 节点的额外类名。仅将修饰符类添加到它们修改的块/元素，并保留原类。

1
2
3
4
5
6
7
8
<!--好-->
<div class = "block block--mod">
    <div class="block block--size--big block-shadow--yes"></div>
</div>
<!--坏-->
<div class="block--mod">
    ...
</div>

CSS

使用修饰符类名作为选择器：

1
.block--hidden { }

要基于块修饰符更改元素:

1
.block--mod .block__elem { }

元素修饰：

1
.block__elem--mod { }

其他问题

有时候可能有嵌套块的情况，翻了很多文章，大概有几个例子:

.block-block__element--modifier

.block-block--modifier__element--modifier

0%