[Specification] CSS BEM writing specifications

BEM is a component-based Web development approach. The idea is to break up the user interface into separate chunks, making it easier and faster to develop complex UI interfaces and reuse existing code without having to paste and copy. BEM consists of Block, Element, and Modifier. The selector extends their relationship with the following concatenation:

  • ‘__ : Double underscores are used to connect a block to its children
  • ‘- : Used as a hyphen only, to connect multiple words of a block or element or modifier (can also be written directly in camel form)
  • — : A double underscore is used to connect the state of a block or element (it can also be represented by a single underscore of ‘_’, described in this article as ‘–‘)

Example: block-name_modifier-name block-name__element-name–modifier-name block-name_modifier-name–modifier-value Block-name__element-name –modifier-name–modifier-value The modifier can only be B B__E B–M B__E–M–M,

The basic concept

Block (Block)

Code snippets can be reused and blocks can be used independently of other components. Blocks can nest with each other, and can nest any number of layers.

Features:

  1. The name of the block is used to describe its purpose. E.g. Menu, button (not its state, e.g. Red, big)
  2. Blocks cannot affect the environment where they reside. This means that you cannot set margins or positions for blocks
  3. You can only use class naming selectors, not label or ID selectors
  4. Does not depend on other blocks or elements within the page

Element

An Element is part of a Block and has no meaning to exist on its own. Any Element is semantically bound to a Block.

Features:

  1. Joins with blocks using ‘__’. Such as: block__item
  2. Used to describe its purpose. Such as item and text
  3. Elements can be nested within each other, at any level
  4. An element is always part of a block. So names like block__item1__item2 are not valid

Modifier

A tag that defines the appearance, state, or behavior of a Block or Element.

Features:

  1. Concatenate with block or element ‘–‘
  2. Modifier describes its appearance (e.g., “what size” or “what theme”, e.g., size_s or theme — islands), state (” Where is it different from others “, Disabled,focused, etc.) and its behavior (” How does it behave “or” how does it respond to the user “, e.g. Directions_left-top)

Classification of Modifiers

Modifiers can be thought of as two types: key:true; key:value; A certain state, or what the value of a certain state is.

Boolean:

  1. Use this only when the presence or absence of the Modifiers is important, which defaults to true. For example, disabled, active, clickable.
  2. The structure of the style under this type is:
    • block-name–modifier-name
    • block-name__element-name–modifier-name

Such as:

<form class="search-form search-form--focused">
    <input class="search-form__input">
    <! -- The `button` element has the `disabled` Boolean modifier -->
    <button class="search-form__button search-formbutton__button--disabled">Search</button>
</form>
Copy the code

The key – value:

  1. Key-value is used when a Modifiers value can describe a complete state. For example: “a menu with the theme of islands”, menu–theme–islands.
  2. The structure of the style under this type is:
    • block-name_modifier-name–modifier-value
    • Block – name__element – name – modifier – name – modifier – value such as:
<! -- The `search-form` block has the `theme` modifier with the value `islands` -->
<form class="search-form search-form--theme--islands">
    <input class="search-form__input">
    <! -- The `button` element has the `size` modifier with the value `m` -->
    <button class="search-form__button search-form__button--size--m">Search</button>
</form>
</form>
Copy the code

Mix

A way to use a different BEM on a DOM node. Mixes can do:

  1. Combine the behavior and styles of different entities without copying code
  2. Create a new component based on an existing component composition. For example:
<! -- `header` block -->
<div class="header">
    <! -- The `search-form` block is mixed with the `search-form` element from the `header` block -->
    <div class="search-form header__search-form"></div>
</div>
Copy the code

The search-form Block itself cannot be used to set position or margin. If placed in the header, it can be used as a header element. The header__search-form can set its position information. When writing a component, reserve a className props for the component.

application

Locate Blocks relative to other Blocks

The best way to do this is to mix blocks and Elements. Margin and position cannot be set on block. Ex. :

<body class="page">
    <! -- header and navigation-->
    <header class="header page__header">.</header>

    <! -- footer -->
    <footer class="footer page__footer">.</footer>
</body>
Copy the code
.page__header {
    padding: 20px;
}

.page__footer {
    padding: 50px;
}
Copy the code

Elements are located in the Block

Nesting is located by creating additional child elements of the Block. Ex. :

<body class="page">
    <div class="page__inner">
      <! -- header and navigation-->
      <header class="header">.</header>

      <! -- footer -->
      <footer class="footer">.</footer>
    </div>
</body>
Copy the code
.page__inner {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
}
Copy the code

About the name

The name of the selector must completely and accurately describe the BEM entity it represents. Ex. :

.button {}
.button__icon {}
.button__text {}
.button--theme--islands {}
Copy the code

We can directly guide us in dealing with a block element. Use in HTML as follows:

<button class="button button_theme_islands">
    <span class="button__icon"></span>

    <span class="button__text">.</span>
</button>
Copy the code

The following CSS makes it hard to make the same judgment:

.button {}
.icon {}
.text {}
.theme--islands {}
Copy the code

Some of the problems

  1. Minimize nesting of selectors (no more than 2 levels are recommended). Nested scenes can appear when there is a modifier, and a Block or Element needs to be styled
  2. BEM itself can be written in B__E__E format, but if this nesting is very deep, indicating that there is a problem with the componentized design, so the code development, requirements can not write this format code
  3. Do not use id or tag selectors
  4. Do not set position, margin and other layout Settings in the Block. Put CSS properties that can change into Modifiers
  5. From the Angle of use, small ICONS are usedicon-Do not use BEM for prefix
  6. Namespace problems. Currently we require pages topage-As a Block, the component takes the group name as a Block.css-guidelinesIn this paper, a beM-like naming method is proposed, with some prefixes as identifiers.

Note: 1, BEM name nesting and DOM is not strictly bound, do not use B__E__E name, but write DOM style has no relation. The DOM under B__E can still have a B__E style DOM. The naming convention is used to identify relationships between top-level block components. Such as:

<div class="menu">
  <div class="menu__header">
    <h2 class="menu__title">Title text here</h2>
  </div>
  <div class="menu__body">
    <img class="menu__img" src="img.png" alt="description" />
    <p class="menu__text">text</p>
    <p class="menu__text">
      <a href="test.html" class="menu__link">link</a>
    </p>
  </div>
</div>
Copy the code

Reference: en. Bem. Info