A detailed introduction to the CSS naming specification BEM from QQtabBar

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.

  1. Create blocks: If a portion of the code is likely to be reused and it does not depend on other page components being implemented.
  2. Create an element: Use it in the block you created, as described in the code.
  3. 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

Recommend

HTML drag and drop function implementation code

Based on Vue The core idea of ​​this function is ...

MySQL sql_mode analysis and setting explanation

When inserting a set of data into the MySQL datab...

How to configure Bash environment variables in Linux

Shell is a program written in C language, which i...

Notes on using the blockquote tag

<br />Semanticization cannot be explained in...

Detailed tutorial on deploying Hadoop cluster using Docker

Recently, I want to build a hadoop test cluster i...

Solution ideas and implementation steps for the problem of css and js becoming invalid after struts2 jump

When the jsp that is jumped to after the struts2 a...

JS ES new feature of variable decoupling assignment

Table of contents 1. Decoupled assignment of arra...

A brief talk about the diff algorithm in Vue

Table of contents Overview Virtual Dom principle ...

JavaScript MouseEvent Case Study

MouseEvent When the mouse performs a certain oper...

Understanding and application of JavaScript ES6 destructuring operator

Table of contents Preface The role of deconstruct...

Five ways to achieve automatic page jump in HTML

In the previous article, we introduced three comm...

Markup Language - List

Standardized design solutions - markup languages ...

Solution to slow response of Tomcat server

1. Analytical thinking 1. Eliminate the machine&#...

Nginx cache configuration example

When developing and debugging a web application, ...

How to configure the pdflatex environment in docker

Technical Background Latex is an indispensable to...