CSS 命名规范-BEM

劫辞

于 2024-01-03 11:33:53 发布

阅读量1.3k

点赞数 22

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_53109172/article/details/135359559

版权

文章目录

- BEM 介绍
- BEM 简单使用

一般来说，解决 css 命名冲突的方案有三种：

命名约定
css in js
css modules

这里主要介绍的是通过命名约定这种方案，这种方式，就是提供一种命名的标准，来解决冲突

常见的这些标准有：BEM OOCSS AMCSS SMACSS 其他

BEM 介绍

基于组件方式的web开发方法，基本思想是将用户界面分成独立的模块

BEM 是一套针对 css 类样式的命名方法
BEM 的全称是：Block Element Modifier
一个完整的 BEM 类名：block__element–modifier 例如轮播图的下方的点，用于切换展示的图片，其中被选中的点可以命名为 banner__dot–selected
__通常用于连接元素，--通常链接不同的形态
BEM 具体代表什么呢？
block【块】 代表：Block(块)，独立的一个实体，独立的意义，通俗点理解就是一个页面中的一个大区域，例如前台首页的 header、banner、news、footer等等，每个页面都可以看做是多个 Block 组成，如图：

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/84d3353fd9d14a0eaf81706ea3d6f3ef.png#pic_center)

element【元素】 代表：block 的一部分，比如一个卡片，卡片的头部和底部可以被命名为 card-header 和 card-footer
modifier【修饰符】 代表：通常表示属性或状态，类似与一种标记同一个 block 或者 element 可以拥有多个 modifier，例如一个标签，可以用于警告，标记成功等等状态，tag_warning、tag_success
在某些项目中，如果使用 BEM，还可能会增加一个前缀，表示用途，例如：
l：layout 表示这个样式用于布局
c：component 表示这个样式是一个组件，即一个功能区域
u：util 表示这个样式是一个通用的、工具性质的样式
j：JavaScript 表示这个样式没有实际意义，专门提供给 js 获取元素使用的
在某些公共使用的组件，团队独立封装使用的，还是增加一个标识前缀，例如熟悉的 element-ui，前缀 el

BEM 简单使用

如果在命名的时候，需要使用多个单词或者拼接，可以使用 - 连接
在BEM中所有类名都是顶级类名，不提倡嵌套式，更倾向于组件化模式
以一个进度条组件为例

block：前缀 + block
```
<div class="jc-progress"></div>
```

element：具体的元素

<!-- 进度条模块 -->
<div class="jc-progress">
    <!-- 进度条区域 -->
	<div class="jc-progress-bar">
        <!-- 进度条外部元素 -->
        <div class="jc-progress-bar__outer">
            <!-- 进度条的内部元素 -->
        	<div class="jc-progress-bar__inner"></div>
    	</div> 
    </div>
    <!-- 进度条信息区域 -->
    <div class="jc-progress-info">
        <!-- 进度条文本 -->
    	<span class="jc-progress-info__text">30%</span>
    </div>
</div>

modifier：状态，例如进度条的颜色会根据进度改变进度条的颜色，70以内表示正常，70-90之间表示警告，超过90非常危险，那就可以定义三种状态 default、waring、danger，通过三个状态定义颜色值

<!-- 进度条模块 -->
<div class="jc-progress">
    <!-- 进度条区域 -->
	<div class="jc-progress-bar">
        <!-- 进度条外部元素 -->
        <div class="jc-progress-bar__outer">
            <!-- 进度条的内部元素  状态为警告 -->
        	<div class="jc-progress-bar__inner--waring"></div>
    	</div> 
    </div>
    <!-- 进度条信息区域 -->
    <div class="jc-progress-info">
        <!-- 进度条文本 -->
    	<span class="jc-progress-info__text">80%</span>
    </div>
</div>