BEM - actual Taobao order module

1. What is BEM?

BEM is a set of CSS naming conventions launched by Yandex. The official description of it is as follows:

BEM is a technology that allows you to quickly develop a website and maintain it for years.

In the beginning, the BEM launched by Yandex included the specification and its supporting build tools. The BEM mentioned today mainly refers to the specifications. In the latest promotion page of BEM, it is described as:

BEM is a naming method that helps you achieve reusable components and code sharing in front-end development.

2. BEM Naming Conventions

BEM is an abbreviation for block, element, and modifier. It uses different blocks, functions and styles to name elements.

BEM Naming Convention Pattern

• B: (block) An independent entity with its own meaning.

It can be a block-level element, which can be understood as a component block. For example, the head is a block, and the content is also a block. A block may be composed of several sub-blocks. example header container menu checkbox inputetc.

• E: Part of a (element) block that has no independent meaning and is semantically associated with its block.

Element is a part of the block and completes a certain function. The element depends on the block. For example, in the logo, img is an element of the logo. In the menu, the menu item is an element of the menu.

• M: (modeifier) ​​Flag on a block or element. Use them to change appearance or behavior.

modifiers represent different states or different versions of the block. such as active onwait

The above describes what BEMs are, so how do we connect them?

.block { }
.block__element { }
.block--modifier{ }

in

• A block represents a higher level abstraction or component.
• block__element represents the descendant of .block and is used to form a complete whole of .block.
• block-modifier represents different states or different versions of .block.

下面我们来看个例子：
weui-primary_loading__dot：库名-组件_状态__元素名
库名：一般是各公司约定俗成的项目名或公司名。这里代表微信。
组件：一般用来创建单独的css来修饰特定的标签。
状态：一般以标签处于的状态或者可以进行交互的效果命名,这个例子可以表示正在加载中状态的样式
元素名：一般以标签作用描述命名。

3. BEM命名的好处

• BEM的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。  通过浏览HTML代码中的class属性，你就能够明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。
• 更加模块化。 块样式永远不依赖于页面上的其他元素，因此你不会遇到级联问题。你还可以将已完成项目中的块转移到新项目。
• 具有可重用性。 以不同方式组合独立块，并智能地重用它们，减少了你必须维护的CSS代码量。有了一套样式指南，你可以构建一个块库，使你的CSS超级有效。

4. 项目实战-淘宝订单

说了这么多，让我们自己动手来实践一下，用前面介绍到了BEM命名法来写一下淘宝订单结构吧~

首先我们来分析一下：

• 这整个功能模块是淘宝页面的一小个功能部分，所以我们可以把这整个功能模块看作一个块(block)，我们给他起名叫：tb-order
• 在这整个块里分上下两个部分(element)，上部分我们起名为：tb-order__hd；下部分叫：tb-order__bd
• In the following part, it is divided into 5 small parts, we name it: tb-order__item; each small part has a small dot element, which represents a quantity of the current situation of each page, such as the number to be evaluated is 2. We name it here: tb__pointer; it will only be displayed when it has a number, and then we will add a state (modefier) ​​to it:tb__pointer_on

After analyzing this, let's start the code:

        <div class="tb-order__hd">
            <span class="tb__title">我的订单</span>
            <span class="tb__more">全部 ></span>
        </div>
        <div class="tb-order__bd">
            <a href="#" class="tb-order__item">
                <span>
                    <span class="iconfont icon-31daifukuan"></span>
                    <span class="tb__pointer"></span>
                </span>
                <p class="tb__desc">待付款</p>
            </a>
            <a href="#" class="tb-order__item">
                <span>
                    <span class="iconfont icon-daifahuo"></span>
                    <span class="tb__pointer"></span>
                </span>
                <p class="tb__desc">待发货</p>
            </a>
            <a href="#" class="tb-order__item">
                <span>
                    <span class="iconfont icon-31daishouhuo"></span>
                    <span class="tb__pointer tb__pointer_on">2</span>
                </span>
                <p class="tb__desc">待收货</p>
            </a>
            <a href="#" class="tb-order__item">
                <span>
                    <span class="iconfont icon-xiaoxi"></span>
                    <span class="tb__pointer tb__pointer_on">8</span>
                </span>
                <p class="tb__desc">待评价</p>
            </a>
            <a href="#" class="tb-order__item">
                <span>
                    <span class="iconfont icon-tuikuantuihuo"></span>
                    <span class="tb__pointer"></span>
                </span>
                <p class="tb__desc">退款/售后</p>
            </a>
        </div>
    </div>
复制代码

Next complete the css style:

    margin:0;
    padding: 0;
}
a{
    text-decoration: none;
}
body{
    background-color: #5b80d7;
    letter-spacing: 1px;
}
.tb-order{
    width:95%;
    margin:10px auto;
    background-color: white;
    border-radius: 20px;
}
.tb-order__hd{
    height:63px;
    padding:0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tb__title{
    font-size: 20px;
    font-weight:bold;
    /* line-height:63px; */
}
.tb__more{
    font-size:16px;
    color:gray;
}
.tb-order__bd{
    height:84px;
    display: flex;
    justify-content: space-around;
}
.tb-order__item{
    width:20%;
    text-align: center;
    line-height:2em;
    color:black;
    position: relative;
}
.iconfont{
    font-size: 30px;
    font-weight: 550;
}
.tb__desc{
    font-size: 14px;
}
.tb__pointer{
    width:22px;
    height:22px;
    position: absolute;
    display: inline-block;
    color:white;
    top:-9px;
    right:18px;
    border-radius: 50%;
    line-height: 22px;
    font-size:11px;
    font-weight: 550;
}
.tb__pointer_on{
   background-color: #ff7302;
}
复制代码

The final result is this:

The above icons are all from the Ali icon library: iconfont-Alibaba vector icon library The
use method is to download the code method, download from the above website. Then import it in css and add it using the class name.

5. Personal Summary

• Before learning BEM, I named each component based on the corresponding English. After writing html, I would have a confusing feeling when adding css styles. After using BEM, I feel that the hierarchical relationship is much clearer. I can know the relationship between two classes through the class name. In addition, it increases the reusability of the code and reduces the amount of code.
• Using a BEM name might cause us to type very long text (most editors have auto-completion, and gzip compression will take us away from file size concerns), but it's still powerful. And for some elements that are the only ones in the block, we can omit some to write it. For example, in the above example, tb-order__hdthere is a title element inside, which is unique in the entire module, so we can write it directly astb__title

6. Related References

getbem.com\