BEM 命名规范

BEM 命名规范

概述

结合团队在日常项目开发过程中，总结提炼出来的BEM规范；主要解决：

• 统一组内代码风格
• 增强代码的可读性
• 提高代码的可维护性
• 减少程序出错的概率

什么是BEM

BEM（Block: 块, Element: 元素, Modifier: 修饰符）是一种基于组件的Web开发方法，基本思想是将用户界面划分为独立的块。这样即使拿到的UI设计稿在复杂，也可以轻松快速地进行拆分，只需要按照特定格式的命名约定，使得前端代码更易于阅读理解，并且是可扩展的，便于团队协作后期维护。

目前除了BEM还有很多别的方法，可以编写可维护的CSS，减少CSS的占用空间：

• OOCSS: 面向对象的CSS
• SMACSS: 可扩展和模块化的CSS架构
• SUITCSS: 一种可靠且可测试的，基于组件开发的样式方法
• Atomic: 原子化 CSS 结构，通用结合OOCSS使用
• BEM: 一种命名方法，能够帮助你在前端开发中实现可复用的组件和代码

BEM 的命名约定

BEM
B: block
E: element
M: modifier

CSS class 遵循BEM命名规范，示例：

官方标准：namespace-block__element_modifier

我们定义的规范：m-block__element--modifier

• 追加约定：给组件添加命名空间m，表示 模块，防止和第三方组件命名冲突
• 所有单词一律小写
• 单词之间用 - 分隔，命名尽量不要超过三个单词，避免命名过长
• 元素名称（Element）通过 __ 与块名称（Block）分隔
• 修饰符名称（Modifier）通过 -- 与块（Block）或元素（Element）名称分隔
• 在组件开发中避免使用全局的OOCSS原子类，因为这会降低组件的可复用性；如：pull-left、pull-right、clearfix
• 尽量避免使用子选择器，如果层次关系过长，逻辑不清晰，非常不利于维护；如: .kso-nav ul li a {}

注：

BEM修饰符（Modifier）代表着元素的状态，但有时候元素的状态需要js来控制，此时遵循规范没有任何好处，比如激活状态，BEM推荐的写法是：

.m-block__element {
    display: none;
    
    &--active {
        display: block;
    }
    
}

当用js为该元素添加状态时，我们需要知道该元素的名字m-block__element，这样我们才能推导出它的激活状态为m-block__element--active，这是不合理的，因为很多时候我们无法得知元素的名称，所以这时候，我们应该统一js控制状态的类名格式，比如active等等，这些类名只用作标识，不允许有默认的公共样式：

.m-block__element {
    display: none;
    
    &.active {
        display: block;
    }
    
}

BEM 的代码风格

• BEM命名中，不要出现连续的Element拆分

/* 不推荐 */
.m-header__control__more {}

/* 推荐 */
.m-header__control-more {}
.m-control-button {}

• 不使用无具体语义定义的标签选择器，不使用id选择器

/* 不推荐 */
.m-header__control-more div i {}
#m-header__control-more {}

/* 推荐 */
.m-header__control-more .icon {}

• 命名尽量不要超过三个单词，避免命名过长

/* 不推荐 */
.m-icon-insert-dialog {}


/* 推荐 */
.m-insert-dialog {}

• 当子元素命名出现过长时，可以考虑拆分成独立的组件命名空间

/* 不推荐 */
.m-insert-dialog {
    &__body {
        &-left {}
        &-right {
            // 可以将它拆成独立的BEM空间
            .m-insert-dialog__document-list {
                .item {}
            }
        }
    }
}

/* 推荐 */
.m-insert-dialog {
    &__body {
        &-left {}
        &-right {
            // XXX: 独立的组件，可以考虑放在最外层.
            // .m-open-documents {}
        }
    }
}

.m-open-documents {
    &__item {}
}

编写 BEM 代码示例

BEM拆分示例一

Block块的粒度拆分得更细，复杂化的界面推荐采用（组件之间嵌套子组件）

HTML结构

	

		

			
			
删除文件
		

		

			
		
	

	

		确定删除文件 WPS论文.docx

		删除后将从历史列表中移除。
	

	

		确认删除
		取消
	

CSS 结构（Less语法）

.m-dialog {

	&-header {
		&__title {}

		&__close {}
	}

	&-body {
		.filename {}
	}

	&-footer {
	}

}

.m-button {

	&--danger {
		background: red;
	}

	&--default {
		background: #fff;
	}

}

BEM拆分示例二

Block块的粒度拆分得不够细，简单的界面结构可采用

HTML结构

	

		

			
			
删除文件
		

		

			
		
	

	

		确定删除文件 WPS论文.docx

		删除后将从历史列表中移除。
	

	

		确认删除
		取消
	

CSS 结构（Less语法）

.m-dialog {

	&__header {
		&-title {}

		&-close {}
	}

	&__body {
		.filename {}
	}

	&__footer {
	}
	
}