CSS uses BEM naming convention practice

When you see a class, what information do you want to get?

• Where is this class used and what is its function?
• Is this class used in other places? Will the modification cause style problems in other places?
• Is class used in js?
• ......

At this point, you want to see this class to solve all the above problems at a glance, and BEM is worth it.

What is BEM

BEM (Block, Element, Modifier) ​​is a front-end naming methodology for component-based web development, mainly for CSS. The idea behind it is to divide the user interface into independent chunks. This makes interface development easy and fast even with complex UIs, and allows reusing existing code without copying and pasting.

Advantages

• Avoid style conflicts
• Reduce name length
• Improve readability
• Increase style reuse

How to use BEM

Block

A functionally independent page component that can be reused

Blocks should not affect their environment, which means you should not set the block's external geometry (margins) or position

<!--
    good
-->
< div class = "header" > </ div >

<!--
    bad
    red-text is to describe the appearance -->
< div class = "red-text" > </ div >

Element

Composite part of a block, cannot be used alone

The structure of the element's full name is block-name__element-name

<!-- Block `search-form` -->
<form class="search-form">
    <!-- `input button` element in `search-form` block -->
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

An element is always part of a block, not another element, so element names cannot be defined as a hierarchy of block__elem1__elem2

<!--
    good
    Follow `block-name__element-name`
-->
<form class="search-form">
    <div class="search-form__content">
        <input class="search-form__input">
        <button class="search-form__button">Search</button>
    </div>
</form>

<!--
    bad
    'search-form__content__button' does not follow `block-name__element-name`
-->
<form class="search-form">
    <div class="search-form__content">
        <input class="search-form__content__input">
        <button class="search-form__content__button">Search</button>
    </div>
</form>

The element is always part of a block and you should not use it separately from the block.

<form class="search-form">
    <!-- 
        good
        The element is inside the block search-form -->
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

<form class="search-form"></form>
<!--
    bad 
    The element is not inside the block search-form -->
<input class="search-form__input">
<button class="search-form__button">Search</button>

Modifier

An entity that defines the appearance, state, or behavior of a block or element

Two types of modifiers

Boolean

The structure of a modifier's full name follows the following pattern:

• block-name_modifier-name
• block-name--modifier-name
• block-name_element-name_modifier-name
• block-name_element-name--modifier-name

<form class="search-form search-form_focused">
    <input class="search-form__input">

    <!-- 'disabled' is an element of 'button' -->
    <button class="search-form__button search-form__button_disabled">Search</button>
</form>

Key-value

The structure of a modifier's full name follows the following pattern:

• block-name_modifier-name_modifier-value
• block-name_modifier-name--modifier-value
• block-name__element-name_modifier-name_modifier-value
• block-name__element-name_modifier-name--modifier-value

<form class="search-form search-form_theme_islands">
    <input class="search-form__input">

    <!-- 
        good
        The value of the modifier `size` of `button` is `m` 
    -->
    <button class="search-form__button search-form__button_size_m">Search</button>
</form>

<form class="search-form
             search-form_theme_islands
             search-form_theme_lite">
    <input class="search-form__input">

    <!-- 
        bad
        You cannot use two different values ​​of the same modifier at the same time -->
    <button class="search-form__button
                   search-form__button_size_s
                   search-form__button_size_m">
   </button>
</form>

A modifier cannot be used in isolation from the block or element it modifies. Modifiers should change the appearance, behavior, or state of an entity, not replace it

<!--
    good
-->
<form class="search-form search-form_theme_islands">
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

<!-- 
    bad
    Block name 'search-form' is missing 
-->
<form class="search-form_theme_islands">
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

Benefits of adding block names to modifiers and element names

• Helps reduce the impact of one block's elements and modifiers on another block's implementation
• It is clearer to know which entity on the DOM node the modifier is applied to.
• Unique names make it easier to find entities in code or on the file system.

When should you use BEM?

• The trick to using BEM is knowing when and what should be written in BEM format.
• Not everything should use BEM naming. The BEM format should be used when explicit module relationships are required.
• For example, if it is just a single public style sheet, there is no point in using the BEM format:

.hide {
    display: none !important;
}

Naming conventions

Double underline style
block-name__elem-name--mod-name--mod-val

• The name is written in lowercase Latin letters.
• Words in BEM entity names are separated by hyphens (-).
• Element names are separated from block names by double underscores (__).
• Boolean modifiers are separated from the name of the block or element by double hyphens (--).
• The modifier's value is separated from its name by a double hyphen (--).
• (Important: Double hyphens within comments (--) may cause errors during HTML document validation.)

CamelCase style
blockName-elemName_modName_modVal

• The name is written in Latin letters.
• Each word in the name begins with a capital letter.
• The separators for block, element, and modifier names are the same as in the standard scheme

React naming paradigm
BlockName-ElemName_modName_modVal

• The name is written in Latin letters.
• Block and element names begin with an uppercase letter. Modifier names begin with a lowercase letter.
• Each word in the name begins with a capital letter.
• The element name is separated from the block name by a single hyphen (-).
• The separator between the modifier's name and value is the same as in the standard scheme.

No namespace styles
_available

• The name is written in Latin letters.
• The modifier is not preceded by the name of the block or element. This naming scheme limits the use of mixes, as it is not possible to determine which block or element a modifier belongs to.

Common CSS naming

example

Vant component css naming

The naming style used is double underscore: block-name__element-name--modifier-name

<div class="van-doc">
    <div class="van-doc-header">
        <div class="van-doc-row">
            <div class="van-doc-header__top">
                <a class="van-doc-header__logo">Search</a>
                <ul class="van-doc-header__top-nav">
                    <li class="van-doc-header__top-nav-item">
                        <a class="van-doc-header__logo-link">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="van-doc-container van-doc-row van-doc-container--with-simulator">
        ......
    </div>
</div>

weui component css naming

The naming used is the React naming style: block-name__element-name_modifier-name

<div class="page button js_show">
    <div class="page__hd">
        <h1 class="page__title">Button</h1>
        <p class="page__desc">Button</p>
    </div>
    <div class="page__bd">

        <div class="button-sp-area">
            <a class="weui-btn weui-btn_primary">Page main operation</a>
            <a class="weui-btn weui-btn_loading">Page main operation</a>
            <a class="weui-btn weui-btn_disabled>Page main operation</a>
            <a class="weui-btn weui-btn_default">Page secondary operations</a>
            <a class="weui-btn weui-btn_warn">Warning operations</a>
        </div>
        ....
        <div class="button-sp-area cell">

BEM Specification Validation Tool

stylelint-selector-bem-pattern

This is the end of this article about the practice of using BEM naming standards in CSS. For more relevant CSS BEM naming standards, 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!