css命名规范——BEM
目录
引言
BEM是什么？
块Block
元素Element
修饰语Modifier
BEM解决了哪些问题？
在流行框架的组件中使用 BEM 格式
实战
认识设计图
如何使用当前的css规范正确命名？
引言
css样式类命名难、太难了，难于上青天，这个和js变量命名还不一样。看看项目中五花八门的样式类命名
如何简单且规范的命名样式类呢？
BEM是什么？
BEM代表块（Block），元素（Element），修饰符（Modifier）。无论是什么页面，都可以拆解成这三部分。
BEM是由Yandex公司推出的一套CSS命名规范，官方是这么描述它的：
BEM是一种让你可以快速开发网站并对此进行多年维护的技术。
BEM是一种命名方法，能够帮助你在前端开发中实现可复用的组件和代码共享。
块Block
特征：
- 代表了更高级别的抽象或组件
- 块名称描述的它的目的是为了表达“这是什么“
- 块名称定义的是命名空间，它保证元素依赖于块
- 块的嵌套：
- 块可以互相嵌套
- 可以有任意数量的嵌套层
应用：
- 块可以嵌套在任何其他块内。
例如：head块可以包括徽标 ( logo)、搜索表单 ( search) 和授权块 ( auth)。
元素Element
特征：
- 代表块 的后代，用于形成一个完整的块的整体
- 元素名称描述的也是“这是什么”
- 它不能单独使用，是块的组成部分
- 元素的嵌套：
- 元素可以互相嵌套
- 可以有任意数量的嵌套级别
- 元素始终是块的一部分，也不是另一个元素，这意味着元素名称办呢定义层次结构
应用：
- 元素是块的组成