Detailed explanation of CSS BEM writing standards

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

Recommend

How to use webpack and rollup to package component libraries

Preface I made a loading style component before. ...

CSS achieves the effect of changing the color of the entire line when the mouse is placed on it

summary: The following is a method for changing t...

JavaScript Basics: Error Capture Mechanism

Table of contents Preface Error Object throw try…...

How to open external network access rights for mysql

As shown below: Mainly execute authorization comm...

Detailed explanation of Apache SkyWalking alarm configuration guide

Apache SkyWalking Apache SkyWalking is an applica...

How to solve mysql error 10061

This article shares with you the solution to the ...

Differences between Windows Server win2003, win2008R2, win2012, win2016, and win2019 system versions

Recently, Microsoft released the 2019 server syst...

In-depth understanding of HTML relative path (Relative Path) and absolute path (Absolute Path)

I have been engaged in Java web development for mo...

Analysis of MySQL data backup and recovery implementation methods

This article uses examples to describe how to bac...

MySQL 8.0 WITH query details

Table of contents Learning about WITH queries in ...

Teach you how to install docker on windows 10 home edition

When I wrote the Redis book and the Spring Cloud ...

Detailed explanation of html printing related operations and implementation

The principle is to call the window.print() metho...

Tomcat8 uses cronolog to split Catalina.Out logs

background If the catalina.out log file generated...

Detailed deployment steps for MySQL MHA high availability configuration and failover

Table of contents 1. Introduction to MHA 1. What ...

How to deal with too many Docker logs causing the disk to fill up

I have a server with multiple docker containers d...