series

  • OOCSS for CSS architecture
  • BEM of CSS architecture
  • SMACSS of the CSS architecture
  • ACSS of CSS architecture
  • ITCSS for CSS architecture

directory

  • Problems encountered
  • Solution
  • Block, element, modifier
  • Sass and BEM
  • conclusion

Problems encountered

We know only one CSS scope, no matter what you by selector to operating style, once you declare a selector, it is global, if the project is complex, the maintenance people must be careful, because you always are likely to affect the other elements, code maintenance is very poor, and CSS code readability.

Browsers briefly supported CSS scoping through the Scope field, and the: Scope pseudo-class is evidence of that legacy.

But in projects where we always want to write readable and maintainable CSS code, we should find a way to do that.

PS: This discussion presupposes traditional web development, because current CSS modular solutions largely solve this problem by limiting styles to component templates as standard. This means that you don’t have to worry about classes in one component affecting the style of another — even if you use the same class name.

Solution

First of all, we should realize that no matter how complex a website is, it has a structure. We can decompose it, for example:

We divided the website into head, body and foot, and continued to divide logo and menu in head.

In fact, this decomposition is much like semantic HTML tags.

Ok, so we took the structure of the site, broke it down, and found a way to avoid style code clutter.

Now that the structure of the site can be sorted out by patient subdivision, how can we make it manifest in the code – BEM.

Block, element, modifier

According to the above ideas, the Yandex team proposed a CSS naming methodology BEM.

First BEM is a hierarchical system, it divides our website into three layers, which exactly correspond to the abbreviations of BEM three English words block, element, modifier, divided into block layer, element layer, modifier layer.

Let’s take a look at the web style that BEM builds

Block: THE HTML Block to which you want to limit the style range

.block{}Copy the code

Element: Any Element within the block, separated by name from your block name

.block__elementOne{}.block__elementTwo{}Copy the code

Modifier: Used to modify the symbol of an existing element style without creating a separate CSS class

.block__elementOne--modifier{}Copy the code

Here is the HTML structure:

<section class="block">
  <p class="block__elementOne">This is an element inside a block.</p>
  <p class="block__elementOne block__elementOne--modifier">This is an element inside a block, with a modifier.</p>
</section>
Copy the code

You’ll notice that our class name implicitly echoes the idea of OOCSS.

To implement BEM into code, we need to follow three principles:

  • use__Two underscores separate the block name from the element name
  • use--Two dashes separate element names and their modifiers
  • All styles are a class and cannot be nested.

According to this principle, it is typically written like this:

block-name__element-name--modifier-name--modifier-value
Copy the code

We can translate the above case to get the following code:

<section class="container">
  <p class="container__paragraph">This is a paragraph inside a container.</p>
  <p class="container__paragraph container__paragraph--bold">
    This is a paragraph inside a container, with a modifier that adds bold styling.
  </p>
</section>
Copy the code

Sass and BEM

With CSS preprocessors, we all like to use nesting as a scope-defining style. If you want to stick to BEM’s no-nesting rule, you can write in a nested format, using @at-root to get non-nested CSS:

.block {
  @at-root #{&}__element { }
  @at-root #{&}--modifier { }
}
Copy the code

Get:

.block {}
.block__element {}
.block--modifier {}
Copy the code

conclusion

We reviewed traditional web sites, where CSS has only one scope, resulting in poor maintenance and readability of style code, and then abstractly summarized the METHODOLOGY of BEM by layering the structure of the site.

I think most people think the dashes and underscores of BEM look strange, so there is very little CSS code in the project that strictly follows the BEM specification. Instead, people take the core idea of BEM and link the naming specification with a dash, such as head-input-search.

reference

  • BEM
  • What is BEM in CSS?
  • BEM 101