Why BEM

If you are the only one writing the CSS code for your project, or if the CSS code for your project is small, you can organize your CSS in a way that you like and are comfortable with. But as projects get bigger and more complex, and multiple people write the CSS code for the project (each with their own style), there’s a need for a unified way to organize the CSS code, and that’s where BEM comes in.

What is the BEM

Block Element Modifier (BEM) is a method of naming CSS classes to make CSS code more maintainable. The standard BEM notation is.block-name__element-name–modifier-name.

Block

Logically and functionally independent, reusable components on a page that can be nested and interacted with, but remain semantically equal and can exist in different locations on the page or in different projects without changing their style.

Any HTML element can be named as a block using letters, numbers, and hyphens, independent of any other block or element on the page.

<header class="header"></header>
Copy the code
.header {
  color: # 333;
  background: #f5f5f5;
}
Copy the code

Element

A part of a block that contains any elements associated with the block and cannot be used outside the block.

<article class="article">
  <h2 class="article__title"></h2>
  <p class="article__content"></p>
</article>
Copy the code
.article {
  padding: 12px;
}

.article__title {
  font-size: 1rem;
}

.article__content {
   font-size:.9rem;
}
Copy the code

Modifier

Used to represent the state, appearance, or behavior of a block or element. Optional.

<button class="btn btn--disabled"></button>
Copy the code
.btn {
  color:  # 333;
  background-color: #fff;
}

.btn--disabled {
  color: #fff;
  background-color: #6c757d;
}
Copy the code

The sample

<div class="list-card">
  <img class="list-card__img" />
  <div class="list-card__content">
    <a class="list-card__link"></a>
    <p class="list-card__desc"></p>
    <div class="list-card__stats">
      <span class="list-card__stat"><i class="list-card__icon"></i></span>
      <span class="list-card__stat"><i class="list-card__icon"></i></span>
      <span class="list-card__stat"><i class="list-card__icon"></i></span>
      <span class="list-card__date"></span>
    </div>
  </div>
</div>
Copy the code

See the Pen BEM Demo by light key Quickcode (@xrr2016) on CodePen.

Common CSS class name

Container, Wrapper, outer, inner, box, header, footer, main, Content, aside, Page, section, block

Status class: Primary, secondary, success, Danger, Warning, info, error, Link, light, Dark, disabled, Active, Checked, Loading

Size classes: large, middle, small, bigger, smaller

Component classes: Card, List, picture, Carousel, Swiper, Menu, NAVS, Badge, Hint, Modal, dialog

Position classes: first, last, current, prev, next, forward, back

Text classes: Title, desc, Content, Date, Author, category, Label, Tag

Avatar, name, age, Post, intro

conclusion

BEM is not required, and you can still write and organize your CSS code however you like. The main purpose of using BEM is to have a unified specification in team development, to facilitate the maintenance of code, and to be able to understand your code faster when someone else takes over your code, or takes over other code.

reference

Get BEM

BEM

Thoroughly understand BEM grammar

What the hell, don’t know how to name class again