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

Detailed explanation of Angular data binding and its implementation

A brief discussion on the problem that the text in the button is not centered vertically in the browser's compatibility mode

Blog

WeChat Mini Program User Authorization Best Practices Guide

MySQL time difference functions (TIMESTAMPDIFF, DATEDIFF), date conversion calculation functions (date_add, day, date_format, str_to_date)

Blog

Detailed explanation of CSS BEM writing standards

Detailed explanation of Angular data binding and its implementation

The difference between Input's size and maxlength attributes

GZIP compression Tomcat and improve web performance process diagram

Detailed explanation of the process of building an image server with nginx (the difference between root and alias)

A brief discussion on the problem that the text in the button is not centered vertically in the browser's compatibility mode

WeChat Mini Program User Authorization Best Practices Guide

How to use display:olck/none to create a menu bar

MySQL slow query operation example analysis [enable, test, confirm, etc.]

Analyze the problem of pulling down the Oracle 11g image configuration in Docker

MySQL time difference functions (TIMESTAMPDIFF, DATEDIFF), date conversion calculation functions (date_add, day, date_format, str_to_date)

Recommend

Introduction to the application of HTML tags superscript sup and subscript sub

How to redirect to https through nginx load balancing

Detailed explanation of the difference between IE8 compatibility view (IE7 mode) and standalone IE7

The marquee element implements effects such as scrolling fonts and pictures

Several solutions for CSS record text icon alignment

Detailed steps to install the specified version of docker (1.12.6) using rpm

MySQL UNION operator basic knowledge points

A quick guide to MySQL indexes

Detailed explanation of Docker data backup and recovery process

HTML is something that web page creators must learn and master.

Implementation of Docker deployment of ElasticSearch and ElasticSearch-Head

Docker image import, export, backup and migration operations

Analysis of the principle of Rabbitmq heartbea heartbeat detection mechanism

Detailed explanation of several ways to obtain the PID (TID, LWP) of Linux threads

Take you to understand the event scheduler EVENT in MySQL