[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:

1. Only class names (not IDs) can be used in CSS.
2. Each block name should have a namespace (prefix)
3. 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

1. In principle, there will be no 2 levels or more selector nesting

Use the BEM principle and use naming to decouple it. All class names are one level to increase efficiency and reusability

2. Two levels of selector nesting appear in.mod-xxx__item_currentThe situation of child elements is as follows:

Use the recommended nesting writing method

Conventional writing method:

.xxx{}
.xxx__item{}
.xxx__item_current{}
// 嵌套写法
.xxx__item_current .mod-xxx__link{}

Recommendation:

.xxx{}
.xxx__item{}
.xxx__item_hightlight{}
.xxx__product-name{}
.xxx__link{}
.xxx__ming-zi-ke-yi-hen-chang{}

// 嵌套写法
.xxx__item_current{
    .xxx__link{}
}

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

BEM solves the problem

.mod-xxx ul li.

Performance

php.cn

HomeCourseArticleQ&ADictionaryManualDownloadsearch APPDownload