BEM là gì? Tìm hiểu chi tiết về tiêu chuẩn quy ước tên trong CSS

BEM được coi là một kỹ thuật quan trọng không thể thiếu nếu bạn muốn trở thành một lập trình viên front-end chuyên nghiệp. Nhắc đến BEM, người ta nghĩ ngay đến việc xây dựng tiêu chuẩn cơ bản về đặt tên cho CSS. Vậy thì BEM là gì? làm sao để đặt tên CSS chuẩn xác nhất theo tiêu chuẩn của BEM? Cùng tìm hiểu rõ hơn qua các thông tin dưới đây nhé!

BEM là gì?

BEM là một tiêu chuẩn được dùng để quy ước đặt tên cho các tên lớp CSS. Cụm từ BEM là viết tắt của Block – Element – Modifier. Thông qua BEM sẽ giúp bạn có thể tạo ra các components có thể tái sử dụng và chia sẻ code trong phát triển front-end.

BEM được tạo ra giúp cho việc lập trình Frontend trở nên dễ hiểu, dễ đọc hơn. Đồng thời giúp họ dễ làm việc và mở rộng cũng như bảo trì khi làm việc với CSS.

Mục đích chính của BEM là viết CSS theo 1 cách có tổ chức và hiệu quả, cũng như đem lại cách viết hiệu quả tên class trong HTML theo hướng module.

Tìm hiểu về các định nghĩa Block – Element – Modifier

Lý do lập trình viên nên sử dụng BEM?

Đối với các lập trình viên thì việc sử dụng bên là cần thiết và quan trọng. Trong các dự án nhỏ thì có thể chưa cần đến BEM nhưng đối với các dự án lớn hay cần làm việc nhóm thì BEM rất quan trọng. Dưới đây là những lý do lập trình viên nên sử dụng BEM:

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

Quy ước cách đặt tên CSS theo tiêu chuẩn của BEM

.block {}   /* Block */

.block__element {}  /* Element */

.block–modifier {}  /* Modifier */

1. Block: 

Block chính là một thành phần của ứng dụng hay trang web đó, các thành phần của DOM cũng có thể coi là các block. Block ở đây thường bao gồm các thành phần footer, header, body, content.

Quy tắc đặt tên của Block: 

• Tên của Block có thể bao gồm chữ số, dấu gạch ngang và cả chữ cái Latin
• Bất kỳ node DOM nào nếu có một class name thì đều có thể là một Block

Cách sử dụng Block trong CSS:

• Không dùng id hoặc tên thẻ
• Không phụ thuộc vào các element/ block trên một trang
• Chỉ sử dụng bộ trọn của class

Ví dụ về Block: Một section td bên dưới tập hợp các block sau:

• .td__container làm nhiệm vụ padding left right và cân max width.
• .td__inner làm nhiệm vụ cân padding top bottom và là đ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 Description và Headline.
• .td__footer chứa button CTA.

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

2. Elements: 

Elements là một thành phần của một block và không thể tồn tại độc lập nếu thiếu block. Bởi elements được đặt bên trong Block và phụ thuộc vào parent block của block đó. Trong BEM, các phần tử này được biểu thị bằng dấu gạch dưới kép __.

Ví dụ:

• .td__headline là dạng Text cỡ lớn, thường là H1 hoặc H2.
• .td__intro, .td__description là mô tả content.
• .td__image chứa ảnh.

Quy tắc đặt tên:

• Tên của Elements có thể bao gồm chữ cái Latinh, chữ số, dấu gạch ngang và gạch dưới.
• Trong tạo class CSS: quy ước tên Block cộng 2 dấu gạch dưới và tên Elements VD:.block__elem

Với HTML:

• Trong một Block, bất kỳ node DOM nàu cũng có thể là một element
• Trong cùng một block nhất định, tất cả các element đều bằng nhau về mặt ngữ nghĩa

Cách sử dụng Element trong CSS:

• Không thể sử dụng id hoặc tên thẻ trong CSS
• Element không phụ thuộc vào các block/elenment trên các trang mạng khác
• Chỉ sử dụng được bộ chọn class

3. Modifiers: 

Modifiers được dùng dùng trong thao tác thay đổi cách hiển thị trên phần tử hoặc trên block. Ví dụ khi mình muốn tạo một block .block__elem và muốn làm nổi bật nó thì sẽ thêm một class .block__elem–hightlight như vậy sẽ giúp tạo sự khác biệt đó.

Quy tắc đặt tên:

• Tên của Modifier có thể gồm dấu gạch ngang, dấu gạch dưới, chữ số hoặc chữ cái Latin
• Trong tạo class CSS: Quy ước Tên của Block/ element cộng với hai dấu gạch ngang cộng tên của Modifier
• Dấu cách ở trong các Modifer dài sẽ được thay thế bằng dấu gạch ngang.

Trong HTML:

• Modifer sẽ là tên class mà bạn thêm vào trong DOM block/ element
• Để thêm các Modifier class vào các nhóm element/ block thì cần sửa đổi hoặc giữ lại class bạn đầu của element/ block đó.

Cách sử dụng trong CSS:

• Các thay đổi của element dựa trên các clovk có chứa modifier
• Sử dụng các Modifier class với bộ CSS
• Element có Modifier, VD: .block__elem–mod { }

Cách thức hoạt động của BEM

BEM hoạt động khi cả 3 thành phần của tên class BEM được sử dụng trong cùng một tên. 3 thành phần đó bao gồm: 

• Block: Được định nghĩa như một khối, là phần tử cha bên ngoài cùng nhất của component
• Element: Là các phần tử bên trong một component
• Mỗi một Element hoặc Block có thể có một biểu hiện sự thay đổi bởi một sửa đổi.

Nếu cả ba thành phần trên cùng được sử dụng trong một tên thì sẽ có dạng: [block]__[element]–[modifier]

Các ví dụ thực tế về BEM

Dưới đây là một số ví dụ về HTML sử dụng BEM giúp bạn dễ hiểu

1. Modifier

   <a class=”btn btn–green” href=”#”>

    </a>

Ở đây btn là block và btn—green là modifier. Style của chúng sẽ 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–green   */

  .btn–green {

      background: green;

  }

Ở đây bạn có thể hiểu là những thay đổi trong style của .btn sẽ có 1 số điểm style khác so với .btn ban đầu. btn–green ở đây đã thay đổi background từ màu xám sang màu xanh. Tùy vào cách đặt mà bạn có thể thay đổi màu font-size, padding và background….

2. Element

<div class=”info”>

  <div class=”info__title”>

  </div>

  <div class=”info__description”>

  </div>

</div>

=> info__title, info__description ở đây là thành phần con bên trong info.

 .info {

    background: #f2f4f7;

    margin-top: 23px;

    padding-bottom: 30px;

    &__description {

      font-size: 15px;

      font-family: “Kozuka Gothic Pr6N”, sans-serif;

    }

    &__title {

      font-size: 20px;

      font-family: “Kozuka Gothic Pr6N”, sans-serif;

      font-weight: bold;

    }

  }

Những sai lầm cần tránh khi sử dụng BEM

• Giữa Block và Element: Nếu như bạn bắt đầu một Block mới thì đừng tiếp tục viết element như một Block nào khác
• Khi viết BEM gặp trường hợp sau phần element có thêm các thẻ “cháu, chắt, chút, chít”… bạn cứ viết element như bình thường chứ không viết 2 gạch ví dụ: block__element__child1__child2__, điều này sẽ khiến tên class khi thêm modifier quá dài. 
• Để viết modifier cho đúng thì bắt buộc phải có phần element hoặc block trước đó.
• Đối với các block quá lớn: khi sử BEM vào một khối quá lớn, có nhiều thẻ con sẽ là cố chấp. Bởi BEM là để tạo ra các khối module vừa, nhỏ và có thể rái sự dụng. Khi gặp các trường hợp này bạn nên tách thành các Block nhỏ hơn nhé!

Những quy ước khi làm việc với BEM

• Khi bắt đầu 1 dự án, để có thể tái sử dụng các component và tồn tại độc lập với các component khác thì cần phải xem rõ guide và stylecủa chúng. Xem các component của bootstrap cũng là một ví dụ tốt về component.
• Cần đặt namespace cho các tên selector của component.
• Để miêu tả mỗi quan hệ giữa các khối và phần tử với nhauthì cần đặt tên như sau .block__parent–eye. Chú không đuộcđặt một class con như sau: .block__parent__eye
• Làm việc với BEM cần duy trì tính modules
• Tránh sử dụng id để viết CSS, đặc biệt  là những trường hợp ưu tiên trong CSS.

Tìm hiểu về biến thể của Bem

Biến thể của BEM xuất hiện nếu như xuất hiện sự thay đổi về style modifier, khi đó bạn cần thêm các thuộc tính # lên các thuộc tính cũ. Nhờ đó:

• Bạn có thể biến thể chúng về dưới dạng Bem để quá trình viết trở lên đơn giản hơn. Lúc này, nó sẽ cung cấp cho chúng ta sự linh hoạt để có thể xác định được một cấu hình module bất kỳ. 
• Cách này phù hợp với nhiều module và với nhiều dạng sửa đổi. Điều này hữu ích giúp cho mọi phần tử tạo lên được phù hợp với giao diện của người dùng. 

Như vậy, BEM được xem như một quy ước đặt tên rất hữu ích, nó vừa đơn giản, vừa mạnh mẽ giúp cho code của bạn trở lên rõ ràng và dẽ đọc hơn. Thông qua những thông tin trên, mong rằng đã giúp bạn hiểu hơn về BEM cũng như BEM là gì. Nếu bạn đang muốn bắt đầu với công việc Tester thì đừng quên tham khảo ngay Khóa học Tester cho người mới bắt đầu của chúng tôi nhé!