谈谈BEM规范(含代码)
2024-10-19 11:52:08
css规范之BEM规范
前言
引用一句经典名言在编程的世界里其中一件最难的事情就是命名,不管是设计到编程语言还是标记语言都会有命名的需求。今天聊的就是关于css的命名规范的发展过程以及演变。
命名的发展变化过程
- 非组件化项目css命名原则
- 复用性 全局性
- 以jquery为代表的时代,我们项目都是独立的html文件,此时为了让我们的项目更好的维护,在写样式的时候,通常我们会将一些通用的样式单独提取到一个css文件,每个页面使用的时候可以引入使用,比如
reset.css,common.css
。 - 每一块功能块的样式都是独立的,之间无法复用,可以复用的样式全部提取到全局样式。
- 组件化项目命名原则
- BEM规范
- 以vue和react为代表的时代,我们项目都是组件化的,组件内的样式都是独立的作用域
scope
来限制,组件之间是可以相互引入使用的,一个组件可以拆分成多个小组件,此时样式命名规范就需要使用BEM规范,从而达到组件样式的独立性。
BEM的规范
- BEM规范是css命名规范,主要适用的范围是组件化开发的模式。
- 规范介绍(B__E--M)
- B
代表block,也就是块,每一个块都是一个独立的功能,块之间可以相互嵌套。
- 块的命名可以由多个单词组成,每个单词之间以
-
链接 - 块的作用只是起到一个隔离的作用,一般不会在块里面实现具体组件的样式,对于块修饰样式比如尺寸,位置可以通过修饰符设置
- 块与修饰符之间通过
--
链接
- 块的命名可以由多个单词组成,每个单词之间以
- E
代表element,也就是元素,元素是依赖于块存在,不能独立存在,必须嵌套在块内部。
- 元素的命名可以由多个单词组成,每个单词之间以
-
链接 - 元素的样式必须依赖块存在,元素是块的具体实现,块与元素之间通过
__
链接 - 元素里面可以定义每个元素自身的样式,对于元素修饰样式比如尺寸,状态可以通过修饰符设置
- 元素与修饰符之间通过
--
链接
- 元素的命名可以由多个单词组成,每个单词之间以
- M
代表modifier, 也就是修饰符,修饰符一般是对于元素或者块的状态和外观进行修饰。
- 修饰符的命名可以由多个单词组成,每个单词之间以
-
链接 - 修饰符可以修饰块和元素的状态、行为、尺寸等
- 修饰符的命名可以由多个单词组成,每个单词之间以
- B
- 代码演示
- 评分组件 源码地址
<div class="qf-rate">
<span class="qf-rate__item qf-rate__item--active">
</span>
<span class="qf-rate__item">
</span>
<span class="qf-rate__item">
</span>
<span class="qf-rate__item">
</span>
<span class="qf-rate__item">
</span>
</div>
.qf-rate{
width: 300px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.qf-rate__item{
width: 48px;
height: 48px;
cursor: pointer;
background: url('./img/star.png');
}
.qf-rate__item--active{
background: url('./img/star_active.png');
}
- BEM不推荐写法
- 采用标签或者id作为选择器,全部采用类名作为选择器
- id因为权重的问题,而且针对于spa的项目会出现id的重复情况
- 标签选择器当我们需要修改组件解构的时候,同时还需要维护组件样式
- 不推荐使用并列选择器,使用修饰符来实现
- 不推荐使用伪类选择器,使用修饰符来实现
- 此处一般通过js控制状态,添加修饰类
- 不推荐使用全局的css样式比如rest.css common.css
- 但是针对于一些格式化的样式还是可以使用,一切目的都是为了方便维护
- 采用标签或者id作为选择器,全部采用类名作为选择器
总结
BEM规范只是前端组件化发展过程中的规范,都是为了组件化服务,并不是唯一的规范,是否采用这个规范目的是为了团队协作和更好的维护迭代,不是为了规范而规范。
最新文章
- unix环境高级编程基础知识之第二篇(3)
- 用excel绘制基因芯片热力图
- json传值以及ajax接收
- [AngularJS] Using ngModel in Custom Directives
- Win7 IIS (HTTP Error 500.21 - Internal Server Error)解决
- 在android4.0中实现View的拖动效果
- ASP.NET执行cmd命令
- git学习整理(1)git clone 理解
- OO(Object Oriented)
- javascript之数组对象与数组常用方法
- hdu-1728(贪心&;&;bfs的灵活运用吧)
- org.springframework.orm.hibernate3.HibernateSystemException:
- jQuery学习--Code Organization Concepts
- dom那些事儿
- As3截图转换为ByteArray传送给后台node的一种方法
- Apple 相关官方地址
- python的单例模式:
- redis 主从同步搭建
- 2019.04.04 第二次训练 【ACM International Collegiate Programming Contest, JUST Collegiate Programming Contest (2018)】
- HTTP和HTTPS的区别,以及各自的优缺点