---前言
在我们写css代码时可能会遇到想命名焦头烂额的情况,那么可以通过什么方法使命名更规范更高效呢?
命名方法
- 下划线命名法(Underscore Case) :单词之间使用下划线连接,如:background_color、font_size。
- 中划线命名法(Kebab Case) :单词之间使用中划线连接,如:.some-class该命名方法正好和 CSS 属性名称如background-color、font-size。保持了一致。
- BEM(块、元素、修饰符):是一种前端开发中的命名规范,旨在提高代码的可读性、可维护性和可协作性。
介绍BEM
-
块(Block ): 块是页面上的独立组件,每个块都有自己的名称空间,以便与其他块进行区分。块名通常使用小写字母,单词之间可以使用短横线(-)分隔。 例如:
.block
,.block-name
-
元素(Element) : 元素是组成块的子元素,通常用于定义块的内部结构和样式。元素名称以块名称为前缀,用双下划线(__)分隔。 例如:
.block__element
-
修饰符(Modifier) : 修饰符是用于修改块或元素的行为或样式的标记。修饰符名称以块/元素名称为前缀,用双连字符(--)分隔。 例如:
.block--modifier
- 让我们用梅老板来解释 BEM 规范
这里梅老板代表了一个组件,比如说一个设计区块。
或许你已经猜到了 BEM 这里的 B 意为『块』('Block')。
在实际中,这里『块』可以表示一个网站导航、页眉、页脚或者其他一些设计区块。
根据上述解释,那么这个组件的理想类名称即是 leo-messi
。
组件的样式应写成这样:
复制代码
.leo-messi {
}
在这里我们使用了连字符分隔法。
整体的区块设计往往并不是孤立的
所以我们要补充E,E代表着元素 比方说,梅老板有一个头部(head
),两只捧杯的手臂(arms
)和过人如麻的双腿(legs
) 在代码中展示:
markdown
复制代码
.leo-messi__head {
}
.leo-messi__arms {
}
.leo-messi__legs {
}
人靠衣装,马靠鞍,丰富块还需修饰符(M)
比方说,梅老板有无胡须
代码为:
lua
复制代码
.leo-messi--beard {
}
.leo-messi--beardless {
}
下面通过拼多多订单模块实战BEM
这是我们要完成的订单模块
-
我们可以把这整个功能模块看作一个块(block),我们给他起名叫:
pdd-box
-
在这整个块里分上下两个部分(element),上部分我们起名为:
pdd-box__hd
;下部分叫:pdd-box__bd
再把"我的订单"设为pdd-box__title
,"查看全部"设为`pdd-box__right -
在下面的部分中,分为5个小部分,我们给他起名为:
pdd-box__item
;这每个小部分中都有一个小圆点的元素,我们在这给他起名:pdd__status
;当它有数量的时候才进行显示,这时我们给他添加上状态(modefier):pdd__status--on
话不多说,上代码!
html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pdd</title>
<link rel="stylesheet" href="./pdd.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4322521_7uo36d9rmwm.css">
</head>
<body>
<div class="pdd-box">
<!-- 头部 -->
<div class="pdd-box__hd">
<span class="pdd-box__title">我的订单</span>
<span class="pdd-box__right">查看全部> </span>
</div>
<div class="pdd-box__bd">
<a href="#" class="pdd-box__item">
<span>
<span class="iconfont icon-daifukuan"></span>
<span class="pdd__status"></span>
</span>
<p class="pdd__desc">待付款</p>
</a>
<a href="#" class="pdd-box__item">
<span>
<span class="iconfont icon-fenxiang"></span>
<span class="pdd__status"></span>
</span>
<p class="pdd__desc">待分享</p>
</a>
<a href="#" class="pdd-box__item">
<span>
<span class="iconfont icon-shizhong"></span>
<span class="pdd__status"></span>
</span>
<p class="pdd__desc">待发货</p>
</a>
<a href="#" class="pdd-box__item">
<span>
<span class="iconfont icon-daishouhuo"></span>
<span class="pdd__status"></span>
<span class="iconfont icon-2_round pdd__status--on"></span>
</span>
<p class="pdd__desc">待收货</p>
</a>
<a href="#" class="pdd-box__item">
<span>
<span class="iconfont icon-evaluate-1-copy"></span>
<span class="pdd__status"></span>
</span>
<p class="pdd__desc">评价</p>
</a>
</div>
</div>
</body>
</html>
接下来完成css样式:
css*
{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
body {
background-color: #44ef10;
letter-spacing: 1px;
}
.pdd-box {
width: 95%;
margin: 10px auto;
background-color: white;
border-radius: 20px;
}
.pdd-box__hd {
height: 64px;
padding: 0 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.pdd-box__title {
font-size: 22px;
font-weight: bold;
}
.pdd-box__right {
font-size: 19px;
color: gray;
}
.pdd-box__bd {
height: 84px;
display: flex;
justify-content: space-around;
}
.pdd-box__item {
width: 20%;
text-align: center;
line-height: 2em;
color: black;
position: relative;
}
.pdd__desc {
font-size: 14px;
}
.iconfont {
font-size: 24px !important;
}
.pdd__status {
width: 10px;
height: 10px;
position: absolute;
top: -3px;
right: 16px;
border-radius: 50%;
}
.pdd__status--on {
position: absolute;
top: -9px;
right: 9px;
font-size: 14px;
color: #ff0000;
}
我们可以看到最终效果
写到最后
BEM为我们提供了一种统一的命名规范,为css中命名提供了新的思路。 但在实际大项目中,因为每个人理解的块元素修饰符不一样,对于层级结构经验不足的工程师效果不一定好。所以说还是根据日常经验的积累和团队定的规范为准。