CSS BEM 命名方式

简介

简易 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…