BEM là gì? Quy ước đặt tên dành cho CSS

79261

BEM là gì?

BEM là viết tắt của Block-Element-Modifier, là một tiêu chuẩn quy ước đặt tên cho các tên lớp CSS. BEM giúp cho việc code Frontend dễ đọc và dễ hiểu hơn, dễ làm việc và dễ mở rộng cũng như bảo trì khi làm việc với CSS.

Việc đặt tên theo chuẩn giúp các lập trình viên frontend hiểu được đoạn code đó có ý nghĩa gì, nó thực hiện nhiệm vụ gì. Từ đó những lập trình viên khác khi đọc vào code của bạn họ cũng hiểu được bạn đang làm gì, từ đó dễ dàng phân tích, thay đổi và quản lý hơn sau này.

Tại sao nên sử dụng BEM?

Trong những dự án nhỏ có thể BEM chưa cần sử dụng nhưng trong các dự án lớn và làm việc với nhóm thì BEM rất quan trọng.

  • BEM giúp cho cả team làm việc với nhau dễ dàng: Khi làm Teamwork với nhau, mỗi người sẽ có một cách đặt tên class riêng và sẽ bị conflict với nhau. Sử dụng BEM sẽ loại bỏ vấn đề này, vì có cấu trúc rõ ràng và dễ tuân thủ khi sử dụng.
  • Modules: Các class của mỗi block sẽ không bị ảnh hưởng bởi các yếu tố khác, nên bạn sẽ không lo CSS của class này sẽ gây ảnh hưởng lên class khác.
  • Tái sử dụng lại: Bạn có thể soạn các block độc lập với nhau và sử dụng lại chúng một cách thuận tiện, giảm số lượng code CSS.
  • Cấu trúc: BEM cung cấp cho CSS của bạn một cấu trúc vững chắc, đơn giản và dễ hiểu.

Những thành phần cơ bản của BEM

Quy ước đặt tên

.block {}   /* Block */
.block__element {}  /* Element */
.block--modifier {}  /* Modifier */

1. Block: Là một thành phần của trang web hay ứng dụng đó, 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à điểm bám cho các element absolute. VD: chỉnh một button…
    • .td__header chứa Sub-title.
    • .td__content chứa Headline và Description.
    • .td__footer chứa button CTA.

Các prefix của các class đều là td giúp chúng ta có thể nhận diện section khi muốn update mục tương ứng trong css.

2. Elements: Là một thành phần của một block và sẽ không tồn tại độc lập mà không có block vì được đặt bên trong nó, và chúng phụ thuộc vào parent block của nó. Trong BEM, các phần tử được biểu thị bằng dấu gạch dưới kép __.

    • .td__headline là Text cỡ lớn. Style thường là H1 hoặc H2.
    • .td__intro, .td__description làm mô tả content.
    • .td__image chứa ảnh.
    • .td__button với style riêng cho button trong section này.

Ví dụ:

<div class="td">
  <div class="td__title">
  </div>
  <div class="td__description">
  </div>
</div>

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

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

3. Modifers: Đượ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--hightlight để tạo sự khác biệt đó. Ví dụ:

Ở đây btn là block .btn—red là 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 1 porject chúng ta cần xem 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 hãy xem các component của bootstrap một ví dụ tốt 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 như sau .block__parent--eye.
  • Duy trì tính modules
  • Tránh sử dụng để viết CSS cho id, cụ thể là những trường hợp ưu tiên trong CSS.

Tham khảo thêm các việc làm Front end | việc làm CSS lương cao tại Topdev

RELATED ARTICLESMORE FROM AUTHOR