前言
在我们前端开发过程中，命名的方式各种各样。一般每个公司都有自己的一套命名规则以及代码规范。今天我们来聊聊CSS的一种命名规范BEM(block Element Modifier)。
什么是BEM？
BEM分别代表了Block Element Modifier，这是一种CSS类名命名规范，由俄罗斯的Yandex公司提出。BEM的核心理念就是把页面拆分成独立的，可复用的组件块，并通过命名规范来组织结构样式。
BEM由Block Element Modifier 三部分组成。
- Block：页面上独立的组成块，比如header，main，footer等
- Element：组成Block的子部分，比如main里的组成内容
- Modifier：标识Block或Element的状态或外观变化。
命名规范
- Block块
- 使用语义化名称(如：.header .main)
- 全使用小写，单词间用连字符分割
- 避免嵌套
.header{ /*头部*/ }
.main{ /*主体*/ }
.primary-button{ /*元素按钮*/ }
.disabled-button{ /*禁用按钮*/ }
- Element元素
- 使用
__连接，块名+__+元素名 - 禁止独立存在，元素一定属于某个块
- 元素不再包含子元素命名
.search-form{}
.search-form__input{}
.search-form__buttom{}
- Modifier修饰符
- 块修饰符 .block--modifier，元素修饰符 .block__element--modifier
- 用来描述块/元素的状态
- 修饰符不能单独使用，必须结合块/元素一起使用
.button--disabled{}
.button--large{}
.button--small{}
BEM命名规范优点
优点：
- 样式隔离：避免全局污染
- 高复用性：组件可以跨项目迁移
- 自文档化：通过类名可以理解结构关系
- 低维护成本：修改组件不影响其他部分
结语
个人觉得如果项目结构层次较深的话BEM的命名就会显得非常冗长，每次写样式的时候都要写一长串，这也增加了负担。那么就可以试试原子式CSS框架Tailwind CSS。
