Quy tắc BEM, và bạn sẽ không phải đau đầu khi nghĩ về cách đặt tên class cho Element

1. Block: Là một thành phần của trang web hay ứng dụng gì đó, các thành phần của DOM cũng có thể là các block. Block ở đây thường là các thành phần header, body, content, footer,… Ví dụ section td bên dưới tập hợp các block sau:
   • .td __container làm nhiệm vụ cân max-width và padding-left/right
   • .td __inner làm nhiệm vụ cân padding-top/bottom và là điểm báo cho các element absolute. Ví dụ: chỉnh một button,…
   • .td __header chứa sub_title
   • .td __content chứa headline và description
2. Element: Là một thành phần của một khối và sẽ không tồn tại độc lập mà không có khối vì được đặt bên trong và vì chúng phụ thuộc vào parent block (khối cha) của nó. Trong BEM, các phần tử – element được biểu thị bởi dấu gạch dưới kép __.
   • .td __headline là text cỡ lớn, thường là các thẻ h1 hoặc h2
   • .td __description làm nhiệm vụ mô tả nội dung content
   • .td __image chứa hình ảnh
   • .td __button với style riêng cho button trong section này

Ví dụ:

<div class="td">
  <h2 class="td__headline">
  </h2>
  <div class="td__description">
  </div>
</div>

Ở đây td__headline , td__description là thành phần bên trong td.

  .td {
    background: #f2f4f7;
    margin-top: 23px;
    padding-bottom: 30px;
    &__description {
      font-size: 15px;
      font-family: "Arial", sans-serif;
    }
    &__headline {
      font-size: 25px;
      font-family: "Arial", sans-serif;
      font-weight: bold;
    }
  }

3. Modifier: Được dùng để thao tác thay đổi cách hiển thị trên block hoặc phần tử. Ví dụ mình muốn tạo thêm một block .block__elem khác nữa và muốn làm nổi bật nó thì sẽ thêm một class .block__elem--highlight để tạo sự khác biệt đó. Ví dụ:

Ở dây btn là .btn--redlà modifier. Style của chúng ta như sau:

   .btn {
      background: gray;
      border: 0;
      border-radius: 3px;
      box-shadow: none;
      padding: 5px 20px;
      color: #fff;
      font-size: 18px;
      line-height: 1.5;
   }
 /* style .btn--red   */
 
  .btn--red {
      background: red;
  }

Quy ước khi làm việc với BEM

• Khi bắt đầu với một project, chúng ta cần xác định rõ guide và style những component dùng chung để có thể tái sử dụng được và tồn tại độc lập với các component khác. Chúng ta có thể xem các component của Bootstrap như một ví dụ điển hình về component
• Tên selector của component thì đặt là namespace
• Không được đặt một class con như sau: .block__parent__eye mà thay vào đó để miêu tả mối quan hệ giữa các khối và phần tử với nhau ta dùng như sau .block__parent--eye
• Duy trì tính modules
• Tránh sử dụng việc viết CSS cho id, cụ thể là đối với những trường hợp ưu tiên trong CSS