1、BEM

BEM其实是块（block）、元素（element）、修饰符（modifier）的缩写，利用不同的区块，功能以及样式来给元素命名。
通过bem规范来命名元素，可以使得我们对于元素的命名更加规范，见名知意，便于项目后期的维护和样式提取。

2、实战

这是饿了么官网的卡片组件的代码，我们来分析以下这个组件的命名。

Block

首先对于BEM中的B，更高级别的抽象或组件，这里是el-card，表示饿了么的card卡片组件。

Element

Element代表 block 的后代(或者组成部分)，用于形成一个完整的 block 的整体。对于el-card，它的Element有卡片头部、卡片主体等。

BEM规范规定B和E之间使用双下划线___连接起来，例如上图中的：

el-card__header (el-card的头部header)
el-card__body (el-card的主体body)

Modifier

Modifier代表 block 的不同状态或不同版本（用于描述每一个元素的具体的属性。可以看出范围在一步步缩小，使命名更加具体。）

BEM规定使用双中线--来连接block和modifier或者element和modifier：

上图中，el-button代表block，是饿了么的按钮，然后对于警告按钮，有自己的warning状态，所以使用：

el-button--warning

3、总结

经过分析饿了么组件库的元素命名规范，可以看到BEM规范的基本命名规则：

【前端开发】CSS BEM命名规范相关推荐

BEM 命名规范简介
1.什么是 BEM 命名 BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介. ...
css BEM书写规范
[规范]css BEM书写规范 BEM是基于组件的web开发方法.其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码. BEM由Block.El ...
前端开发要遵守什么规范如何成为企业急需人才
前端开发要遵守什么规范?如何成为企业急需人才?一个项目大多都是由一个团队来完成,如果没有统一的代码规范,每个人的代码必定会风格迥异,在沟通对接时就会消耗大量的时间.下面小编就给大家介绍一下Web前端开 ...
前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
day01--java基础编程：计算机基础知识，java语言概述，java开发环境搭建，eclipse概述，创建简单java项目，JDK JRE JVM的关系，java开发中的命名规范，编程风格
1 Day01–Java开发环境+HelloWorld 1.1 计算机基础知识资料下载网址:刘沛霞 18600949004 code.tarena.com.cn tarenacode code_20 ...
css外部命名规范,前端开发较全CSS命名规范
前端开发用什么框架吗前端开发新框架前端开发app混合开发框架文件名命名规范模块:module. 基本共用:base. 布局.版面:layout.css 主题:themes.css 专栏:col ...
前端开发的流程与规范
先仍2篇网上找的: 在团队不断成长的过程中,需要处理的需求也在逐渐增长,团队中成员如何分工配合决定了开发的效率.产品的质量,在这个时候我们就需要一个流程来规范.指导我们,下面就将咱们前端组的一些经验跟 ...
FleaPHP 开发指南 - 4. 命名规范和目录结构
FleaPHP 的命名规则和目录结构初看上去比较复杂,但习惯以后,你会发现这种命名规则带来许多好处.因此像 Zend Framework 也是采用同样的做法. 当然,FleaPHP 对于应用程序的命名 ...
div+css中命名规范
上次给别人演示div的效果时,写了css样式却一直不能呈现,最后不小心发现自己在写css样式时候,给一个class命名为数字开头的名称,才想起来自己去年刚学习样式表时候也出现此问题,最后被我解决掉的, ...

【前端开发】CSS BEM命名规范

目录