First of all, what does BEM mean? BEM stands for block, element, or modifier. It is a front-end naming methodology proposed by Yandex and is a CSS naming specification

Let’s take an example: ZfBUI -tabbar__item From this name we can read out the TAB bar items on the Alipay interface and then read out the corresponding structure between them

  • Give them more meaning in their names and reflect their relationship. —–> This just makes your code friendlier and easier to maintain.
  • In addition, with longer names, their naming also becomes more specific, more stable in context, and does not interfere with the style of other components, thus improving the independence of components.
  • And you can find the class name directly when writing CSS styles.

Here is a more detailed introduction to BEM

B(BLCOK): the concept of block, also called component, module.

A page is a patchwork of components that are independent of each other. Most projects in modern development are made up of common components.

E (element) : element

His responsibility in the block (unique name) is not a simple parent-child relationship: zfbui-tabbar__item_on Note that there are two underscores __

M (modifier) : modifier

That’s the state change. It cannot be used alone, but must depend on blocks or elements such as __item_on (an underscore).

Let’s analyze the TarBar of Alipay interface

It is clear that the tabbar is a block, which clearly distinguishes the five items, and you can see that each item is composed of three elements. In this way, we can first give them a good independent name: item icon icon label little red dot badge

So we’re done naming them, so let’s tease out their structure

In the figure above, we can see their structure clearly so that we can construct a BEM tree:

After standardizing them with BEM at this time: Zfbui -tabbar__item zfbui-tabbar__icon zfbui-tabbar__label zfBUI -badge (This badge can be simplified because it is not used in other components of the page and is special)

  • In the BEM specification, we can modify the state of an element with zfbui-tabbar__item_on. This is a real case where Modifier is used.

After building their framework and naming with BEM, you must have a clear understanding of alipay’s Tabbar structure in mind

Nice let’s start making a Tabbar component ourselves

  1. First, let’s finish up the HTML structure.
<! -- BEM naming convention --> <! -- Tabbar Block tabbar__item child element two underscores --> <div class="zfbui-tabbar">
        <a href="#" class="zfbui-tabbar__item zfbui-tabbar__item_on">
            <span>
                    <svg class="zfbui-tabbar__icon" aria-hidden="true">
                            <use xlink:href="#icon-rectangle390"></use>
                          </svg>
                <span class="zfbui-badge">8</span>
            </span>
            <p class="zfbui-tabbar__label"</p> </a> <a href="#" class="zfbui-tabbar__item">
            <span>
                    <svg class="zfbui-tabbar__icon" aria-hidden="true">
                            <use xlink:href="#icon-yiban"></use>
                          </svg>
                <span class="zfbui-badge">-</span>
            </span>
            <p class="zfbui-tabbar__label"< p> </a> <a href="#" class="zfbui-tabbar__item">
            <span>
                    <svg class="zfbui-tabbar__icon" aria-hidden="true">
                            <use xlink:href="#icon-tansuoa"></use>
                          </svg>
                <span class="zfbui-badge">-</span>
            </span>
            <p class="zfbui-tabbar__label"</p> </a> <a href="#" class="zfbui-tabbar__item">
            <span>
                    <svg class="zfbui-tabbar__icon" aria-hidden="true">
                            <use xlink:href="#icon-shejiao"></use>
                          </svg>
                <span class="zfbui-badge">-</span>
            </span>
            <p class="zfbui-tabbar__label"</p> </a> <a href="#" class="zfbui-tabbar__item">
            <span>
                    <svg class="zfbui-tabbar__icon" aria-hidden="true">
                            <use xlink:href="#icon-wode"></use>
                          </svg>
                <span class="zfbui-badge">-</span>
            </span>
            <p class="zfbui-tabbar__label"</p> </a> </div>Copy the code
  1. Measure the length and color well and note that all the lengths here need to be halved in real use!

*{
    margin: 0;
    padding: 0;
}

a:link {
    color: #a2a2a2;
}
a:vistied{
    color: #a2a2a2;
}
a:hover {
    color: #509ff1;
}
a:active {
    color: #509ff1;
}

.zfbui-tabbar {
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 500;
    background-color: #ffffff;
    border-top: 1px solid #dddddd;} .zfbui-tabbar__item { flex: 1; /* flex = 1:1:1*/ text-align: center; /* Make horizontal content center */ padding: 8.5px 6px 6px; /* < span style = "max-width: 100%; color:#a2a2a2;text-decoration: none; } .zfbui-tabbar__item > span { display: inline-block; position: relative; }. Zfbui -tabbar__icon {display: inline-block; /* Inline elements cannot be set to inline-block to set the width */ width: 22px; height: 22px; fill: currentColor; overflow: hidden; Margin - bottom: 3.5 px; } .zfbui-badge { position: absolute; top: -2px; right: -13px; min-width: 8px; display: inline-block; padding: .15em .4em; /* < span style = "font-size: 12px; line-height: 12px; background-color:#F43539;border-radius: 18px; */ color: white; /* Color: white; } .zfbui-tabbar__label { font-size: 10px; text-align: center; line-height: 10px; }Copy the code
  • Final result:

Add: the above icon is from Ali icon library: www.iconfont.cn/

The more recommended use is in the form of symbol reference, which supports multi-color ICONS rather than monochrome restrictions. With a few tricks, it is possible to adjust styles like fonts by font size and color.