CSS BEM命名规范
2020-12-29 本文已影响0人
WangLizhi
简介
BEM 的意思就是块（block）、元素（element）、修饰符（modifier），是由 Yandex 团队提出的一种前端命名方法论。这种巧妙的命名方法让你的 CSS 类对其他开发者来说更加透明而且更有意义。BEM 命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。
重要的是要注意，这里使用的基于 BEM 的命名方式是经过 Nicolas Gallagher 修改过的。
命名约定
.block {}
.block__element {}
.block--modifier {}
之所以使用两个连字符和下划线而不是一个，是为了让 block 可以用单个连字符来界定，如：
.site-search {} /* 块 */
.site-search__field {} /* 元素 */
.site-search--full {} /* 修饰符 */
举个栗子
- block__element：块里的元素，如：nav（block）里的 a 标签（element）；
- block__element--modifier：块里的元素的状态、属性或修饰，如：nav 里的 a 标签，有 active、hover、normal 3 种状态（modifier）。
<nav class="nav">
<a href="#" class="nav__item nav__item--active">当前状态</a>
<a href="#" class="nav__item nav__item--hover">鼠标移上时的状态</a>
<a href="#" class="nav__item nav__item--normal">正常状态</a>
</nav>
.nav {
&__item {
&--active {
}
&--hover {
}
&--normal {
}
}
}
命名空间
可以参考 BlazeUI 的命名规范：https://github.com/BlazeUI/blaze 。
- o-：表示一个对象（Object），如 .o-layout。
- c-：表示一个组件（Component），指一个具体的、特定实现的 UI。如 .c-avatar。
- u-：表示一个通用工具（Utility），如 .u-hidden。
- t-：表示一个主题（Theme），如 .t-light。
- s-：表示一个上下文或作用域（Scope），如 .s-cms-content。
- is-，has-：表示一种状态或条件样式。如 .is-active
- _：表示一个 hack，如 ._important。
- js-：表示一个 JavaScript 钩子。如 .js-modal。
- qa-：表示测试钩子。
我们团队新增了自己的一些规范，仅供参考：
- p-：表示一个页面（page），如 .p-home。
- b-：表示页面（page）内的块（block），如 .b-content。
- cc-：表示组件内的组件，该组件样式仅在父组件作用域下有效，如 .cc-list。
- c{xxx}：表示颜色，如 .c1。
- bgc{xxx}：表示背景色，如 .bgc1。
- bdc{xxx}：表示边框颜色，如 .bdc1。
- fs{xxx}：表示字体大小，如 .fs24。
总结
- B（block）：某一块展示/功能区域，比如：.nav。
- E（element）：这块展示/功能区域里的某个元素，比如: .nav__item。
- M（modifier）：某个元素或者某个块的状态，比如：.nav--hide, .nav__item--active 等。
