Trang chủ Lập trình Quy tắc BEM, và bạn sẽ không phải đau đầu khi nghĩ...

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

262
0
Quảng cáo của Google

Bạn muốn trở thành một Front-End Developer? Đã bao giờ bạn được người khác hỏi về cách quản lý các classname của từng element trong một file html hay chưa? Là một người tự học Front-End, cá nhân mình nghĩ việc đặt tên các class cho mỗi element và làm sao để có thể dễ kiếm soát, tái sử dụng và tránh conflict giữa các dòng code css khi làm việc nhóm trong một dự án là việc khá đau đầu và tốn sức. Và thật tình cờ, mình đã tìm kiếm được một phương pháp hết sức hiệu quả trong việc đặt tên các class và được toàn thế giới công nhận, phổ biến. Phương pháp đó được gọi là BEM (Block – Element – Modifier).

BEM là một quy ước theo chuẩn chung của toàn thế giới, rất đơn giản, dễ đọc, dễ hiểu và nhận được sự hưởng ứng nhiệt liệt của các Coder. BEM không phải là phương pháp duy nhất nhưng đó là phương pháp hiện giờ mình đang sử dụng – đặc biệt là khi được ghép nối với SASS thì thật sự tuyệt vời!

Khái niệm về BEM

BEM (viết tắt của Block – Element – Modifier) là quy ước đặt tên class theo tiêu chuẩn chung và được phát triển bởi Team Yandex. Nó được phổ biến rộng rãi và trở nên vô cùng hữu ích trong việc khiến cho CSS trở nên dễ đọc, dễ hiểu và dễ mở rộng.

Tại sao lại cần sử dụng quy tắc BEM

Với những dự án có quy mô nhỏ thì việc sử dụng BEM có lẽ chưa thực sự cần thiết nhưng trong các dự án lớn phải làm việc theo Team thì BEM như một giải pháp cứu cánh vậy. Tại sao lại như vậy? Mình sẽ chỉ ra cho bạn thông qua vài gạch đầu dòng dưới đây.

  • BEM giúp cho việc cộng tác giữa các thành viên trong một Team trở nên dễ dàng và hiệu quả. Khi làm việc chung với nhau, mỗi người sẽ có sự sáng tạo riêng trong việc đặt tên class và dễ bị conflict với nhau. Quy tắc BEM sẽ loại bỏ vấn đề này, với một cấu trúc rõ ràng và dễ tuân thủ khi sử dụng
  • Tính Modules: Các class của mỗi khối 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 gây ảnh hưởng lên class khác
  • Khả năng tái sử dụng: Bạn có thể soạn các khối độc lập khác nhau và sử dụng lại chúng một cách thuận tiện, giúp giảm số lượng code CSS
  • Về 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

Về 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 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;
    }
  }
  1. 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
Quảng cáo của Google

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.