众里寻命名千百度，BEM却在灯火阑珊处

最新推荐文章于 2024-05-12 22:40:26 发布

Cipher_Y

最新推荐文章于 2024-05-12 22:40:26 发布

阅读量39

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/Cipher_Y/article/details/134313351

版权

---前言

在我们写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）在代码中展示：

复制代码
.leo-messi__head {
}
.leo-messi__arms {
}
.leo-messi__legs {
}

人靠衣装，马靠鞍，丰富块还需修饰符（M）

比方说，梅老板有无胡须

代码为：

复制代码
.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 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样式：

{
    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中命名提供了新的思路。但在实际大项目中，因为每个人理解的块元素修饰符不一样，对于层级结构经验不足的工程师效果不一定好。所以说还是根据日常经验的积累和团队定的规范为准。

Cipher_Y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
众里寻命名千百度，BEM却在灯火阑珊处

块（Block）: 块是页面上的独立组件，每个块都有自己的名称空间，以便与其他块进行区分。块名通常使用小写字母，单词之间可以使用短横线（-）分隔。例如：.block,.block-name元素（Element）: 元素是组成块的子元素，通常用于定义块的内部结构和样式。元素名称以块名称为前缀，用双下划线（__）分隔。例如：.block__element修饰符（Modifier）: 修饰符是用于修改块或元素的行为或样式的标记。修饰符名称以块/元素名称为前缀，用双连字符（--）分隔。
复制链接

扫一扫