[Specification] CSS BEM writing specification
Using the BEM naming convention, theoretically, each line of css
code has only one selector.
BEM stands for "block, element, modifier". We commonly use these three entities to develop components.
In the selector, the following three symbols represent the extended relationship:
- 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。 __ 双下划线:双下划线用来连接块和块的子元素 _ 单下划线:单下划线用来描述一个块或者块的子元素的一种状态 type-block__element_modifier
Block (block)
A block is a part of a design or layout that has a specific and unique meaning, either semantically or visually.
In most cases, any independent page element (complex or simple) can be considered a block. Its HTML container will have a unique CSS class name, which is the name of the block.
Some prefixes (ui-
) will be added to the CSS class name of the block. These prefixes have a similar function in CSS as namespace.
The formal (actually semi-formal) definition of a block has the following three basic principles:
- Only class names (not IDs) can be used in CSS.
- Each block name should have a namespace (prefix)
- Each CSS rule must belong to a block.
For example: a custom list .list
is a block. Usually the custom list is counted in the mod
category. In this case, The block writing of a list
list should be:
.list
Element (element)
The sub-elements in the block are Child elements of a block, and children of child elements in bem
are also considered direct children of the block. The class name of an element within a block must be prefixed with the name of the parent block.
As in the above example, li.item
is a sub-element of the list,
.list{}.list .item{}.list{}.list__item{}
modifier (modifier )
A "modifier" can be understood as a specific state of a block, indicating that it holds a specific attribute.
It’s best to use an example to explain. A block representing a button has three sizes by default: small, medium, and large. To avoid creating three different blocks, it's better to add modifiers to the blocks. This modifier should have a name (for example: size
) and a value (small
, normal
or big
).
As in the above example, it represents a selected list and an activated list item
.list{}.list.select{}.list .item{}.list .item.active{}.list{}.list_select{}.list__item{}.list__item_active{}
LESS writing specification
Use files with .less
suffix to store variables, mixed codes and final merge and compression.
.less
The reference order of files will affect the scope and priority of the final compiled style. Please try to reference them in the order from bottom to custom.
About style
Writing principles
2 levels or more
selector nesting
1. In principle, there will be no Use the BEM
principle and use naming to decouple it. All class names are one level to increase efficiency and reusability
.mod-xxx__item_current
The situation of child elements is as follows:
2. Two levels of selector nesting appear inUse the recommended nesting writing method
Conventional writing method:
.xxx{} .xxx__item{} .xxx__item_current{} // 嵌套写法 .xxx__item_current .mod-xxx__link{}
Recommendation:
## The corresponding HTML structure of #.xxx{} .xxx__item{} .xxx__item_hightlight{} .xxx__product-name{} .xxx__link{} .xxx__ming-zi-ke-yi-hen-chang{} // 嵌套写法 .xxx__item_current{ .xxx__link{} }is as follows:
<ul class="xxx"> <li class="xxx__item">第一项 <div class="xxx__product-name">我是名称</div> <span class="xxx__ming-zi-ke-yi-hen-chang">看类名</span> <a href="#" class="xxx__link">我是link</a> <li> <li class="xxx__item xxx__item_current">第二项 且 当前选择项 <div class="xxx__product-name">我是名称</div> <a href="#" class="xxx__item-link">我是link</a> <li> <li class="xxx__item xxx__item_hightlight">第三项 且 特殊高亮 <div class="xxx__product-name">我是名称</div> <a href="#" class="xxx__item-link">我是link</a> <li> </ul>
Component Complete decoupling will not cause namespace pollution, such as the potential nesting risk caused by the writing method of
.mod-xxx ul li.
BEM naming will make the Class name longer, but after gzip compression, the bandwidth overhead is negligible
子less | Notes |
---|---|
##lib-base.less
| |
lib-mixins.less
| |
lib-reset.less
| |
lib-ui.less
| |
xxx.less
|