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
- Create blocks: if part of the code may be reused, and it does not depend on other page components being implemented.
- Create element: it plays a role in the code. Under the description, it is used under the block you create.
- 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!