您现在的位置是：网站首页> 编程资料编程资料
CSS使用BEM命名规范实践CSS样式书写顺序和命名规范及注意事项值得收藏的CSS命名规范(规则)常用的CSS命名规则 好的 CSS 命名规范可以节约 Debug 时间css 命名：BEM, scoped css, css modules 与 css-in-js详解CSS规范BEM CSS和OOCSS的示例代码详解详解css BEM书写规范 从QQtabBar看css命名规范BEM的详细介绍
2021-09-03
831人已围观
简介 这篇文章主要介绍了CSS使用BEM命名规范实践,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
当你看到一个class的时候，你想得到什么信息？
- 这个class用在什么地方，作用是什么？
- 是否在其他地方也有使用该class，修改会不会引起其他地方的样式问题？
- class 是否在js中被使用？
- ......
此时，你最想一眼看到这个class就解决以上所有的问题，而BEM你值得拥有
什么是BEM
BEM（块，元素，修饰符）是基于组件的Web开发的一种前端命名方法论，主要针对CSS。其背后的想法是将用户界面分为独立的块。即使使用复杂的UI，这也使界面开发变得容易和快速，并且允许重用现有代码而无需复制和粘贴。
优势
- 避免样式冲突
- 减小名称长度
- 提高可阅读性
- 增加样式重用
怎么使用BEM
Block
一个功能独立的页面组件，可以重复使用
块不应影响其环境，这意味着您不应设置块的外部几何形状（边距）或位置
< div class = "header" >< div class = "red-text" >
Element
块的复合部分，不能单独使用
元素全名的结构为block-name__element-name
一个元素始终是块的一部分，而不是另一个元素，因此元素名称不可定义为 block__elem1__elem2 的层次结构
元素始终是一个块的一部分，您不应该与该块分开使用
Modifier
定义块或元素的外观，状态或行为的实体
修饰符的两种类型
Boolean
修饰符全名的结构遵循以下模式：
- block-name_modifier-name
- block-name--modifier-name
- block-name_element-name_modifier-name
- block-name_element-name--modifier-name
Key-value
修饰符全名的结构遵循以下模式：
- block-name_modifier-name_modifier-value
- block-name_modifier-name--modifier-value
- block-name__element-name_modifier-name_modifier-value
- block-name__element-name_modifier-name--modifier-value
不能将修饰符与修饰的块或元素隔离使用。修饰符应更改实体的外观，行为或状态，而不是替换它
在修饰符和元素名称中添加块名称的好处
- 有助于减少一个块的元素和修饰符对另一个块的实现的影响
- 可更清楚的知道修饰符应用于该DOM节点上的哪个实体
- 唯一名称使查找代码或文件系统中的实体变得更加容易
什么时候应该用 BEM 格式
- 使用 BEM 的诀窍是，你要知道什么时候哪些东西是应该写成 BEM 格式的。
- 并不是每个地方都应该使用 BEM 命名方式。当需要明确关联性的模块关系时，应当使用 BEM 格式。
- 比如只是一条公共的单独的样式，就没有使用 BEM 格式的意义：
.hide { display: none !important; }命名规范
双下划线风格block-name__elem-name--mod-name--mod-val
- 名称以小写拉丁字母书写。
- BEM实体名称中的单词由连字符（-）分隔。
- 元素名称与块名称之间用双下划线（__）分隔。
- 布尔修饰符用双连字符（--）与块或元素的名称分隔。
- 修饰符的值与其名称之间用双连字符（--）分隔。
- （重要提示：注释（--）中的双连字符可能会在HTML文档验证期间导致错误。）
CamelCase styleblockName-elemName_modName_modVal
- 名称以拉丁字母书写。
- 名称中的每个单词都以大写字母开头。
- 块，元素和修饰符名称的分隔符与标准方案中的相同
React命名范式BlockName-ElemName_modName_modVal
- 名称以拉丁字母书写。
- 块和元素的名称以大写字母开头。修饰符的名称以小写字母开头。
- 名称中的每个单词都以大写字母开头。
- 元素名称与块名称之间用单个连字符（-）分隔。
- 修饰符的名称和值之间的分隔符与标准方案中的相同。
没有命名空间样式_available
- 名称以拉丁字母书写。
- 修饰符之前不包括块或元素的名称。此命名方案限制了mixs的使用，因为它无法确定修饰符属于哪个块或元素。
常用的CSS命名
例子
vant 组件 css 命名
使用的命名是双下划线风格：block-name__element-name--modifier-name
......
weui 组件 css 命名
使用的命名是 React命名风格：block-name__element-name_modifier-name
相关内容
- css3+贝塞尔曲线实现可伸缩input搜索框效果纯css3实现类苹果Yosemite系统的搜索框动画效果源码纯css3制作搜索框伸缩动画特效源码 分享8款纯CSS3实现的搜索框功能纯CSS3 UI实现七种不同风格的搜索框样式特效源码jQuery和CSS3炫酷高级搜索框特效源码
- CSS3 rgb and rgba（透明色）的使用详解CSS3颜色值RGBA与渐变色使用介绍CSS3解决移动页面上点击链接触发色块的问题 CSS3中使用RGBa来调节透明度的教程CSS3中使用RGBA设置透明度的示例CSS3 透明色 RGBA使用介绍
- css 实现圆形渐变进度条效果的示例代码css 进度条的文字根据进度渐变的示例代码利用css3实现进度条效果及动态添加百分比css 横向进度条和竖向进度条实现代码使用 css3 实现圆形进度条的示例利用CSS3实现进度条的两种姿势详解使用CSS实现阅读进度条
- 详解CSS3弹性伸缩盒css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- CSS 实现 图片鼠标悬停折叠效果如何只使用CSS创建折叠标题效果的示例代码详解CSS外边距折叠引发的问题详解css外边距折叠（margin collapsing）纯CSS实现可折叠树状菜单纯CSS实现圆角折叠菜单的方法
- CSS3 实现雷达扫描图的示例代码css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 详解css3 flex弹性盒自动铺满写法详解css3中dispaly的Grid布局与Flex布局CSS中flex和inline-flex的区别详解让CSS flex布局最后一行列表左对齐的N种方法(小结)css3 flex布局实现平均分配元素的示例代码CSS3新增布局之: flex详解深入浅析CSS3中的Flex布局整理详解CSS中的flex布局css用Flex布局制作简易柱状图的实现CSS中display flex整理（布局利器） 10分钟理解CSS3 FlexBox弹性布局
- 让我来教你使用css中的字体图标的方法CSS实现精灵图与字体图标纯CSS3实现带有字体图标效果的灰白色下拉网站导航css设置矢量图字体图标的方法(图解)
- 纯css实现轮播图banner自动轮换效果CSS3简易切割轮播图的实现代码CSS3全屏图文幻灯片自动轮播特效代码CSS3 transition 实现通知消息轮播条HTML+CSS+JS实现堆叠轮播效果的示例代码纯CSS实现的图片轮播(幻灯片)效果代码原生CSS实现文字无限轮播的通用方法
- css中filter属性和backdrop-filter的应用与区别详解css3 filter属性的使用简介CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用使用css的filter写鼠标滑过效果的实现示例CSS filter 有什么神奇用途
点击排行
本栏推荐
