简介
简易 css 命名方式，减小命名冲突，使得 css 更有组织感和识别感。但如今写 react 项目大多可以忽略对 css 的命名约束了。
官网介绍：http://getbem.com/introduction/
释义
Block：具有独立意义的实体，就如 header, container, menu, checkbox, input
Element：块的一部分，没有独立的含义，并且在语义上与该块相关。如 menu item, list item, checkbox caption, header title
Modifier：块或元素上的状态标志。就如 disabled，highlighted, checked, success
变种例子
命名约定的模式如下：
.block{}
.block__element{}
.block--modifier{}
.block 代表了更高级别的抽象或组件。
.block__element 代表.block的后代，用于形成一个完整的.block的整体。
.block--modifier代表.block的不同状态或不同版本。
下面一段代码
<div class="header">
<div class="header__tab header__tab--active">
<div class="header-tab__item"></div>
<div class="header-tab__item"></div>
<div class="header-tab__item"></div>
<div class="header-tab__item"></div>
</div>
</div>
一个Block下的所有Element无论相互层级如何,都要摊开扁平的属于Block
BEM 最多只有 B+E+M 三级,不可能出现 B+E+E+..+E+M 超长class名,也要求E不能同名
-单中划线同英语里做连字符例如 mod-menu 或 mod-menu__item 这里 B或E或M需要多个单词来描述,就使用中划线。
常用css类名。
- 布局类：header, footer, container, main, content, aside, page, section
- 包裹类：wrap, inner
- 区块类：region, block, box
- 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
- 列表类：list, item, field
- 主次类：primary, secondary, sub, minor
- 大小类：s, m, l, xl, large, small
- 状态类：active, current, checked, hover, fail, success, warn, error, on, off
- 导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
- 交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
- 星级类：rate, star
- 分割类：group, seperate, divider
- 等分类：full, half, third, quarter
- 表格类：table, tr, td, cell, row
- 图片类：img, thumbnail, original, album, gallery
- 语言类：cn, en
- 论坛类：forum, bbs, topic, post
- 方向类：up, down, left, right
- 其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading…