css命名规范——BEM

目录

引言

BEM是什么？

 块Block

元素Element

修饰语Modifier

BEM解决了哪些问题？

在流行框架的组件中使用 BEM 格式

实战

认识设计图

如何使用当前的css规范正确命名？

---

引言

css样式类命名难、太难了，难于上青天，这个和js变量命名还不一样。看看项目中五花八门的样式类命名

如何简单且规范的命名样式类呢？

BEM是什么？

BEM代表块（Block），元素（Element），修饰符（Modifier）。无论是什么页面，都可以拆解成这三部分。

BEM是由Yandex公司推出的一套CSS命名规范，官方是这么描述它的：

BEM是一种让你可以快速开发网站并对此进行多年维护的技术。

BEM是一种命名方法，能够帮助你在前端开发中实现可复用的组件和代码共享。

 块Block

特征：

1. 代表了更高级别的抽象或组件
2. 块名称描述的它的目的是为了表达“这是什么“
3. 块名称定义的是命名空间，它保证元素依赖于块
4. 块的嵌套：
   1. 块可以互相嵌套
   2. 可以有任意数量的嵌套层

应用：

1. 块可以嵌套在任何其他块内。

例如：head块可以包括徽标 ( logo)、搜索表单 ( search) 和授权块 ( auth)。

元素Element

特征：

1. 代表块 的后代，用于形成一个完整的块的整体
2. 元素名称描述的也是“这是什么”
3. 它不能单独使用，是块的组成部分
4. 元素的嵌套：
   1. 元素可以互相嵌套
   2. 可以有任意数量的嵌套级别
   3. 元素始终是块的一部分，也不是另一个元素，这意味着元素名称办呢定义层次结构

应用：

1. 元素是块的组成