Detailed explanation of CSS BEM writing standards

BEM is a component-based approach to web development. The idea is to separate the user interface into independent blocks, making it easier and faster to develop complex UI interfaces, and to reuse existing code without copying and pasting. BEM consists of Block, Element, and Modifier. The following connectors are used in the selector to expand their relationship:

`__: Double underscores are used to connect blocks and their sub-elements
` : used only as a hyphen to connect multiple words of a block or element or modifier (can also be written directly in camel case)
--: Double hyphens are used to connect the states of blocks or elements (single underscores can also be used)

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

Basic Concepts

Block

The code snippet may be reused and this code does not depend on other components, that is, Block can be used. Blocks can be nested within each other to any depth.
Features:

The name of a block describes its purpose. Such as menu, button
Blocks cannot affect their environment. This means that you cannot set margin or position for blocks.
Only class name selectors can be used, not tag or id selectors.
Does not depend on other blocks or elements in the page

Element

Element is a part of Block and has no independent existence. Any Element is semantically bound to a Block.

Features:

Use '__' to connect with the block. Such as: block__item
Used to describe its purpose. Such as: item, text
Elements can be nested within each other, up to any level.
Elements are always part of a block. So naming like block__item1__item2 is illegal.

Modifier

Modifier is a tag on a Block or Element. Use them to change style, behavior, or state. The connector for blocks or elements is '--'.

application

Positioning a Block relative to other Blocks

The best approach is to use a mix of blocks and elements. Solve the problem that margin and position cannot be set on block.

example:

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

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

.page__footer {
    padding: 50px;
}

Positioning Elements within a Block

Nesting is achieved by creating additional child elements of Block.

example:

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

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

About naming

Selector names must fully and accurately describe the BEM entity they represent.

example:

.button {}
.button__icon {}
.button__text {}
.button_theme_islands {}

We can directly instruct that we are dealing with a block element. Use in html like:

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

    <span class="button__text">...</span>
</button>

The following CSS makes it difficult for us to make the same judgment:

.button {}
.icon {}
.text {}
.theme_islands {}

I adopted the BEM specification in my git project miniui and implemented BEM using sass. If you are interested, you can check it out: https://github.com/banyaner/miniui

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Installing Alibaba Cloud Server with Docker and the pitfalls encountered in installing it in a virtual machine (summary of problems)

>>: JavaScript Sandbox Exploration