What information do you want when you see a class?

  • What is this class used for and what does it do?
  • Is this class used elsewhere, and will changes cause style problems elsewhere?
  • Is class used in JS?
  • .

At this point, you want to solve all of these problems at a glance, and BEM is something you deserve

What is the BEM

BEM (Block, Element, Modifier) is a front-end naming methodology for component-based Web development, specifically for CSS. The idea behind it is to break up the user interface into separate chunks. This makes interface development easy and fast, even with complex UIs, and allows reuse of existing code without copy and paste.

advantage

  • Avoiding style conflicts
  • Reducing name length
  • Improve readability
  • Increasing style reuse

How do I use BEM

Block

A standalone 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 >
Copy the code

Element

A compound part of a block that 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>
Copy the code

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

<! -- good follows' 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>
Copy the code

An element is always part of a block, and you should not use it separately from that block

<form class="search-form">
    <! -- The good 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>
<! The bad element is not in the search-form block.
<input class="search-form__input">
<button class="search-form__button">Search</button>
Copy the code

Modifier

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

Two types of modifiers

Boolean

The structure of the 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>
Copy the code

Key-value

The structure of the 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 'button' modifier 'size' 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 cannot use the same modifier with two different values at the same time -->
    <button class="search-form__button search-form__button_size_s search-form__button_size_m">
   </button>
</form>
Copy the code

Modifiers cannot be used in isolation from the block or element they are modifying. Modifiers should change the appearance, behavior, or state of the 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 missing block name 'search-form' -->
<form class="search-form_theme_islands">
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>
Copy the code

Benefits of adding block names to modifiers and element names

  • Helps reduce the impact of elements and modifiers in one block on the implementation of another block
  • It is more clear to which entity on the DOM node the modifier applies
  • Unique names make it easier to find entities in your code or file system

When should YOU use BEM format

  • The trick with BEM is to know when something should be written in BEM format.
  • Not every place should use BEM naming. The BEM format should be used when relational module relationships need to be clarified.
  • For example, it makes no sense to use the BEM format for a single common style:
.hide { display: none ! important; }Copy the code

Naming conventions

Double underline style block-name__em-name –mod-name–mod-val

  • Names are written in lower case Latin letters.
  • Words in BEM entity names are hyphenated (-).
  • Element names are separated by a double underscore (__).
  • Boolean modifiers use a double hyphen (--) separated from the name of the block or element.
  • A double hyphen between the value of a modifier and its name (--).

(*** Important: The double hyphen in the *** comment (–) may cause an error during HTML document validation.)

CamelCase style blockName-elemName_modName_modVal

  • The name is written in Latin alphabet.
  • 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 scenario

React naming paradigm blockname-elemname_modname_modval

  • The name is written in Latin alphabet.
  • Block and element names begin with a capital letter. The name of the modifier begins with a lowercase letter.
  • Each word in the name begins with a capital letter.
  • Element names are separated by a single hyphen (-).
  • The separator between the name and value of the modifier is the same as in the standard scheme.

No namespace style _available

  • The name is written in Latin alphabet.
  • Modifier does not include block or element names before it.

This naming scheme limits the use of mixs because it cannot determine which block or element a modifier belongs to.

Use abbreviations for naming names

Named names are written in full

Common CSS names

example

** Vant component CSS naming **

The naming style used is double underline: 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>
Copy the code

** CSS naming of weui components **

The name 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  weui-btn weui-btn_default">Page Secondary Operation</a>
            <a class="weui-btn weui-btn_warn">Warning operations</a>
        </div>.<div class="button-sp-area cell">
Copy the code

Verification BEM specification tool

stylelint-selector-bem-pattern