The defect of CSS

We know that use CSS in a more disturbing problem, there is no scope is the CSS, we wrote a component or module, often want to they can reuse everywhere, but there is no scope, because the CSS when we name the style will be very carefully, for fear of naming repeat in the style of the components are covered. As a result, every new developer working on a similar component will probably have to rename a new stylesheet to avoid duplicating the existing one, which will cause the CSS file to snowball.

There are many solutions on the market aimed at reducing the amount of CSS code and making it easier for programmers to cooperate and maintain CSS code, such as OOCSS, SMACSS, SUITCSS, and BEM is one of the most commonly mentioned solutions.

What the hell is BEM?

The essence of BEM is simply a CSS naming scheme.

BEM is a highly useful, powerful and simple naming convention to make your front-end code easier to read and understand, easier to work with, Easier to Scale, more robust and explicit and a lot more strict. (BEM is a very useful, powerful and simple naming convention that makes your front-end code easier to read and understand, easier to use, easier to extend, Stronger and more clear, more strict.

The above is the BEM official website explanation, you can know that it is a naming scheme, then what is its specification? Why is it easier to read and expand? Let’s look at the specific naming conventions for BEM.

BEM specification details

BEM is actually an acronym for three words: Block, Element and Modifier.

1.Block

A block is a separate entity, like a “building block” for an application. A block can be either simple or composite (containing other blocks).

Naming conventions:

Block names can consist of Latin letters, numbers, and hyphens. Such as: block

The component of the search box and button shown below is a block.

2.Element

An element is a part of a block that has some function. Elements are context-dependent: they are meaningful only if they are in the context of the block they are supposed to belong to.

Input and Button in the figure below are elements.

Naming conventions:

Element names can contain Latin letters, numbers, dashes, and underscores. The CSS class name is written as the block name plus two underscores plus the element name:.block__elem

3.Modifier

Modifiers are flags on blocks or elements. These flags describe the appearance, behavior, or state of an element or block. For example, the active state on the button, A label.

Naming conventions:

Modifier names can contain Latin letters, numbers, dashes, and underscores. CSS class names are written as block or element names with two dashes:.block–mod or.block__elem–mod and.block–color-black.

Example:

Suppose you have a form block with modifiers “Theme: Xmas” and “Simple: True,” and a form block with input and Submit elements. The Submit element has the modifier “disabled: true” that disallows submission of the form if it is not filled in.

HTML


  
  

Copy the code

CSS

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }
Copy the code

Summary:

From the above example, we can see that BEM has the following characteristics:

  1. Complex and even slightly verbose class names greatly reduce the possibility of class name duplication
  2. The style of a class element in each block corresponds to a class name. In this way, each element corresponds to a class name, reducing the use of child or descendant selectors and improving CSS performance.
  3. CSS class names are more semantic and easier to understand
  4. High reusability, for example, we can replace the name of the theme class form–theme-xmas, which can be replaced with other theme styles

How to use BEM more easily

Just think, BEM’s naming convention is so long that we would be exhausted if we wrote such a long class name by hand. Therefore, with the help of some preprocessors such as LESS and SASS, we can improve our development efficiency.

Using less as an example, we can use the ampersand to simplify our code:

.form { width: 12rem; height: 6rem; &__input{ font-size: 16px; } &__submit{ background: blue; &--disabled{ background: gray; }}}Copy the code

The compiled:

.form {
  width: 12rem;
  height: 6rem;
}
.form__input {
  font-size: 16px;
}
.form__submit {
  background: blue;
}
.form__submit--disabled {
  background: gray;
}
Copy the code

A stone from other mountains:

1. Naming isn’t so rigid

BlockName -elementName–modifierName {/*… /}, with a single underscore:. Block-name_element-name –modifierName {/… * /}. So do not strictly abide by, according to their own needs to change.

2. There is room for improvement in the writing of modifiers

Sometimes the state of an element needs TO be controlled by JS, and there is no benefit in following the BEM specification, such as the active state.

.block__element {
  display: none;
}
.block__element--active {
  display: block;
}
Copy the code

This requires us to know the name of the block__element, and the class name becomes very long, and the active class style is not reusable, so we can consider adding a regular operation such as.js-active or.is-active to control this.

.block__element {
  display: none;
}
.block__element.is-active {
  display: block;
}
Copy the code

3. Each block can have a separate CSS

Because the CSS produced under THE BEM specification is highly independent, it is possible to consider a separate CSS for each component. When a page needs a component, it is necessary to import the CSS @ of this component into the CSS of the page.

/* page.css */

@import "form.css";
@import "slider.css";

.block__element {
  display: none; 
}
Copy the code

Reference:

getbem.com/

The definition of the BEM

Why do we use BEM

How to use BEM better

Use cases:

Ele. me component library