浅谈BEM CSS-CSS设计模式与架构

前言

BEM是Block Element Modifier的缩写，
BEM 是一种为了让CSS Class 更好维护的命名方式，藉由不同组件的命名 让程式码易懂、可重用，进而有效率地开发和维护。
虽然有些人讨厌他的命名方式冗长，但是便于团队协作。只要定义好了大的框架和命名，那么团队其他成员基于BEM的规范进行开发，理解成本降低，而且基本不存在样式冲突的问题。

由来

Yandex公司推出的BEM，包括了规範以及其配套构建工具。如今提到的BEM主要是指其中的规範，在BEM最新的推广页中，对其的描述为：

BEM是一种命名方法，能够帮助你在前端开发中实现可複用的组件和代码共享。

这次介绍BEM的命名方式是经过Nicolas Gallagher修改过的。

命名技术并不是原始的BEM，但却是一个我更喜欢的改进版。无论实际使用了什么样的符号，它们其实都是基于同样的BEM原则。

BEM 表示法的格式大致如下：

/* block component 区块*/.block {}/* element 元素*/.block__element {}/* modifier 修饰子*/.block__element--modifier {}

B-Block(区块)

网页是由多个区块组合自成一区
想成是网页构成的组件

header, container, menu, checkbox, input

功能：
1.负责描述功能
2.不使用元素选择器和ID选择器
3.block里面不应该加样式

E-Element(元素)

命名原则：要用2个底线__隔开作为prefix
也是页面上的区块，但比较像是区块的内容
例如像是一个menu里面的还有它的组成区块

menu__item list__item, checkbox__caption header__title

功能：
1.表达目的，而非状态
2.无法独立于父元素之外

M-Modifier (修饰符)

命名原则：在后面加上--来辨识它是修饰符

.menu__item--active.menu__item--sucess.menu__item--danger

功能：
1.同一个Block或Element可以允许多组Modifier
2.用来定义区块或是元素的属性或状态

一个完整页面组成如下图：
绿色：block
青色：element
红色：modifier

并不是所有的css命名方式都要，遵照如此模式，只是我们应该要有具备良好的css架构概念如以下：
1.可预测
2.可重覆使用
3.可延展
4.可维护

而且当某些css设定可重複使用时，我们就应该独立出来，让他可以被重複使用。类似如
clearfix{clear:both}

.caps {     text-transform: uppercase; } 

这条CSS不属于任何一个BEM範畴，它仅仅只是一条单独的样式。

使用BEM的诀窍是，你要知道什么时候哪些东西是应该写成BEM格式的。因为某些东西确实是位于一个块的内部，但这并不意味它就是BEM中所说的元素。

结论

很多情境都不是绝对的，如果太过于坚持这些地方的话，反而会变成干扰排版的障碍，毕竟本来原意就是希望好管理css 专案

程式码连结 & 图片来源
Get BEM
BEM 设计模式
MindBEMding – getting your head ’round BEM syntax