A detailed introduction to the CSS naming specification BEM from QQtabBar

BEM from QQtabBar

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

weui-primary_loading__dot: library name-component_state__element name Library name: is generally agreed upon by each company.
Component: Generally used to create separate CSS to modify specific tags.
State: Generally named after the state the tag is in or the effect that can be interacted with. Element name: Generally named after the description of the tag's function.

Advantages of BEM:
Ease of use If you want to use BEM, you only need to adopt the BEM naming convention. Unitary independent blocks and CSS selectors can make your code reusable and unitary. Flexibility After using BEM, methods and tools can be organized and configured in the way you like.

A detailed introduction to BEM

B（Block）

Block: A reusable, functional, and independent page component. The name of the block describes its purpose ("What is it?" - a library or component), not its state (red or size).

Blocks should not affect their environment, which means you should not set external geometry (edges) or positioning for blocks.
When using BEM, you should not use CSS tags or ID selectors.

E (element): element

Element: A composite part of a block. Elements are context-dependent: they only make sense in the context of the block they belong to, and so cannot be used in isolation.
An element's name describes its purpose ("What is this?" item, text, etc.), not 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. It describes its appearance ("what size?" or "which theme?" etc.)

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

Create blocks: If a portion of the code is likely to be reused and it does not depend on other page components being implemented.
Create an element: Use it in the block you created, as described in the code.
Create modifiers: when you need to modify the properties of an element. Analyze the QQ application bar structure

insert image description here

Overall, it is a large block containing 4 small blocks, and each small block contains three elements.

Block appBar
Small item
Icon
Tagsdesc
Small dot pointer

insert image description here

<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;
         
        }

The final effect

insert image description here

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, download from the above URL. Then import it as css and add it using the class name.

This is the end of this article about the detailed introduction of CSS naming specification BEM from QQtabBar. For more relevant CSS naming specification BEM content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: Sample code for html list box, text field, and file field

>>: Sample code for displaying a scroll bar after the HTML page is zoomed out