Detailed introduction of CSS naming specification BEM from qqtabbar

Time:2022-5-11

Viewing BEM from qqtabbar

First, what does BEM mean?
BEM means block, element and modifier. It is a front-end naming methodology proposed by yandex team and a CSS naming standard

weui-primary_ loading__ Dot: library name – component_ Status__ Yuan Su Ming
Library name: it is generally agreed by companies.
Component: it is generally used to create a separate CSS to decorate specific tags.
Status: it is generally named after the status of the label or the effect that can interact
Element name: generally named after the label function description.

Advantages of BEM:

Ease of use if you want to use BEM, you only need to use BEM naming convention. The unit independent block and CSS selector can make your code reusable and flexible. After using BEM, methods and tools can be organized and configured in the way you like

Introduce BEM in detail

B (block): block

Block: Reusable function independent page component
The block name describes its purpose (“what is it?” Library or component), not its status (red or size)

  • The block should not affect its environment, which means that you should not set external geometry (edges) or positioning for the block.
  • CSS tags or ID selectors should also not be used when using BEM

E (element): element

Element: the composite part of a block. Elements are context dependent: they are meaningful only in the context of the block they should belong to, so they cannot be used alone.
The element name describes its purpose (“what is this?” Items, text, etc.) rather than its state (“what type is it, or what does it look like?” Red, large, etc.).

M (modifier): modifier

An entity that defines the appearance, state, or behavior of a block or element
Describes its appearance (“what size?” Or “which theme? Etc.)

After understanding BEM, we need to think about how we should use it

  1. Create blocks: if part of the code may be reused, and it does not depend on other page components being implemented.
  2. Create element: it plays a role in the code. Under the description, it is used under the block you create.
  3. Create modifiers: when you need to modify the properties of an element. Analyze the structure of QQ application bar

在这里插入图片描述

On the whole, it is a large block, including four small blocks, each containing three elements.

Block AppBar
Small item
Icon icon
Tag desc
Dot pointer

在这里插入图片描述

<div class="qqui-appBar">
        <a href="#" class="qqui-appBar__item qqui-appBar__item_on">
            <span>
                <i class="iconfont icon-icon-test1 icon_on"></i>
                <span class="qqui__pointer qqui__pointer_on">1</span>
            </span>
            < p class = "qqui_desc qqui_desc_on" > message</p>
        </a>
        <a href="#" class="qqui-appBar__item">
            <span>
                <i class="iconfont icon-icon-test2"></i>
                <span class="qqui__pointer"></span>
            </span>
            < p class = "qqui_desc" > contact</p>
        </a>
        <a href="#" class="qqui-appBar__item">
            <span>
                <i class="iconfont icon-icon-test"></i>
                <span class="qqui__pointer"></span>
            </span>
            
            < p class = "qqui_desc" > highlights</p>
        </a>
        <a href="#" class="qqui-appBar__item">
            <span>
                <i class="iconfont icon-icon-test3"></i>
                <span class="qqui__pointer qqui__pointer_oOn"></span>
            </span>
            
            < p class = "qqui_desc" > Dynamic</p>
        </a>
    </div>

* {
            padding: 0;
            margin: 0;
        }

        a:link {
            color: #b0b3bf;
        }

        a:vistied {
            color: #b0b3bf;
        }

        a:hover {
            color: #2ec4fc;
        }

        a:active {
            color: #2ec4fc;
        }
        a i.iconfont {
            display: inline-block;
           
            width: 36px;
            height: 36px;
            overflow: hidden;
            margin-bottom: 3.5px;
            font-size: 36px;
        }
        a i.icon_on{
            color: #2ec4fc;
        }
        

        .qqui-appBar {
            display: flex;
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 500;
            background-color: #f9f9f9;
        }

        .qqui-appBar .qqui-appBar__item {
            flex: 1;
            text-align: center;
          
            padding-top: 25px;
            font-size: 0;
            color: #b0b3bf;
            text-decoration: none;
        }
        .qqui-appBar__item>span{
            display: inline-block;
            position: relative;
            margin-bottom: 9px;
        }
        .qqui-appBar .qqui__desc {
            font-size: 18px;
            text-align: center;
            line-height: 18px;
            margin-bottom: 13px;
        }
        .qqui-appBar .qqui__desc_on{
            color: black;
        }

        .qqui-appBar .qqui__pointer{
            position: absolute;
            top: -2px;
            right: -2px;
            width: 20px;
            height:20px;
            display: inline-block;
            line-height: 18px;
            color: white;
            border-radius: 50%;
            font-size: 10px;
        }
        .qqui-appBar .qqui__pointer_on{
            
            background-color: #F43539;
        }
        .qqui-appBar .qqui__pointer_oOn{
            width: 12px;
            height: 12px; 
            line-height: 12px; 
            background-color: #F43539;
         
        }

Final renderings
 

在这里插入图片描述

The icons above are all from Alibaba Icon Library: https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=16472
The method of use is the download method, which can be downloaded from the above website. Then it is introduced as CSS and added with the class name.

This is the end of this article about the detailed introduction of CSS naming standard BEM from qqtabbar. For more information about CSS naming standard BEM, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

Recurrent neural network LSTM RNN regression: sin curve prediction

Summary:This article will share how the recurrent neural network LSTM RNN can realize regression prediction. This article shares from the Huawei cloud community [[Python artificial intelligence] XIV. Sin curve prediction of recurrent neural network LSTM RNN regression case [changeable AI show]](https://bbs.huaweicloud.com/b…)》, by eastmount. I RNN and LSTM review 1.RNN (1) RNN principle The English name […]