BEM(Block, Element, Modifier)是由Yandex团队提出的一种前端命名规范。其核心思想是将页面拆分成一个个独立的富有语义的块(blocks),从而使得团队在开发复杂的项目变得高效,并且十分有利于代码复用,即便团队引入新成员,也容易维护。在某种程度上,BEM和OOP是相似的。
BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目。
element-ui,采用的就是BEM思想
.block{} .block__element{} .block--modifier{}
- .block 代表了更高级别的抽象或组件。
- .block__element 代表.block的后代,用于形成一个完整的.block的整体。
- .block–modifier代表.block的不同状态或不同版本。
之所以使用两个连字符和下划线而不是一个,是为了让你自己的块可以用单个连字符来界定,如:
.site-search{} /* 块 */ .site-search__field{} /* 元素 */ .site-search--full{} /* 修饰符 */
Block
页面上逻辑和功能独立的,可复用的组件,可以嵌套并相互交互,但在语义上它们保持平等,可以存在页面上不同的位置或不同项目中,保持样式不变。
可以使用字母,数字,连字符进行命名,任何html元素都可以成为一个block,不依赖于页面上的其他block或者element。
<header class="header"></header>
.header { color: #333; background: #f5f5f5; }
Element
组成块的一部分,内部的任何元素都与块有关联,不能在块的外部使用。
<article class="article"> <h2 class="article__title"></h2> <p class="article__content"></p> </article>
.article { padding: 12px; } .article__title { font-size: 1rem; } .article__content { font-size: .9rem; }
Modifier
用来表示块或者元素的状态,外观或者行为,不必须,可以选择使用。
<button class="btn btn--disabled"></button>
.btn { color: #333; background-color: #fff; } .btn--disabled { color: #fff; background-color: #6c757d; }
示例:
<div class="list-card"> <img class="list-card__img" /> <div class="list-card__content"> <a class="list-card__link"></a> <p class="list-card__desc"></p> <div class="list-card__stats"> <span class="list-card__stat"><i class="list-card__icon"></i></span> <span class="list-card__stat"><i class="list-card__icon"></i></span> <span class="list-card__stat"><i class="list-card__icon"></i></span> <span class="list-card__date"></span> </div> </div> </div>
参考一下element-ui 的button ,加深对BEM 的理解
“默认按钮”的class: “el-button–default”
“主要按钮”的class:”el-button–primary”
“成功按钮”的class:”el-button–success”
以上”–default,- -primay,–success,”代表button的不同状态
再看一下form
看一下这个form的DOM结构
<form class="el-form"> <div class="el-form-item"> <label class="el-form-item__label" style="width: 80px;">活动名称</label> <div class="el-form-item__content" style="margin-left: 80px;"> <div class="el-input"> <input type="text" autocomplete="off" class="el-input__inner"> </div> </div> </div> </form>
el-form,el-form-item 为block也就是BEM中的B
el-form-item__labe 和el-form-item__content为element也就是BEM中的E
同样的,el-input和el-input__inner又是新的一层结构
常见的class关键词:
- 布局类: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…
简单规则:
- js操作的类统一加上js-前缀
- 不要超过四个class组合使用,如.a.b.c.d
- 状态类直接使用单词,参考上面的关键词,如.active, .checked
- 图标以icon-为前缀(字体图标采用.icon-font.i-name方式命名)。
参考:
最新评论
这小生活不错呀
不错,必须顶一下!
看着你还在坚持,很好
看来忙了也没时间更新博客了
NIce。学习了。。。。
网站不错!!!!
简洁实用,好文章!
不错,过来支持一下