BEM Là Gì? Cách Đặt Tên Class CSS Theo Quy Ước Chuẩn BEM

I. BEM là gì?

BEM là viết tắt của Block - Element - Modifier, là một phương pháp quy ước đặt tên tiêu chuẩn cho các class khi viết CSS. BEM được tạo ra bởi Yandex và được sử dụng rộng rãi trong phát triển Front-end, bởi tính dễ hiểu, dễ đọc, dễ làm việc, giúp tránh việc xảy ra đặt tên class trùng nhau và viết css đè lên nhau khi làm việc với CSS.

II . Ý nghĩa của BEM

Như đã đề cập trước đó, BEM là viết tắt của ba từ: Block, Element và Modifier và được kết hợp theo quy ước nối như sau:

VD: Block__element--modifier

Theo quy tắc này đặt tên này, một class luôn bắt đầu với Block sau đó là Element (được nối với Block bằng hai dấu gạch dưới), và cuối cùng là Modifier (được nối với Block hoặc Element bằng hai dấu gạch ngang).

• Block - Khối: Đại diện cho một thành phần độc lập, có thể tái sử dụng. 
• Element - Phần tử: Là các phần tử con bên trong block. 
• Modifier - Thuộc tính: Là một trạng thái hoặc biến thể của khối hoặc phần tử. Các modifier thường được sử dụng để thay đổi kiểu dáng hoặc thuộc tính của block hoặc element.

III. Tại sao nên sử dụng quy ước BEM 

Đối với những dự án nhỏ, việc sử dụng BEM có thể chưa cần thiết. Tuy nhiên, đối với các dự án lớn, có nhiều nhà phát triển tham gia và codebase phức tạp, BEM là một quy ước đặt tên class vô cùng hữu ích.

Quy chuẩn BEM giúp cho các thành viên trong nhóm làm việc nhanh gọn, dễ dàng hơn: Khi làm việc theo nhóm, mỗi thành viên có thể có cách đặt tên class khác nhau, không theo một quy chuẩn logic nào cả, điều này có thể dẫn đến tình trạng trùng tên class và xung đột trong việc viết mã CSS, khiến code của các thành viên có thể bị ghi đè lên nhau. Việc áp dụng quy chuẩn BEM giúp các thành viên trong team loại bỏ vấn đề này, vì BEM cung cấp một cấu trúc rõ ràng và dễ tuân thủ khi đặt tên, từ đó loại bỏ khả năng xung đột và tăng tính hiệu quả trong quá trình làm việc nhóm.

Modules: Các class CSS của mỗi khối (block) độc lập với nhau, không bị tác động bởi các yếu tố khác. Vì vậy, bạn có thể yên tâm rằng các class này sẽ không làm ảnh hưởng tới các class khác khi viết CSS

Tính dễ hiểu, tái sử dụng dễ dàng: Quy chuẩn BEM cung cấp một cấu trúc đơn giản và dễ hiểu và có thể tái sử dụng lại chúng một cách thuận tiện giúp giảm tải được số lượng Code CSS

IV. Cú pháp đặt tên của BEM

.block__element--modifier {}

.block {}  /* Block */

.block__element {}   /* Element */

.block--modifier {}   /* Modifier */

- Block: thường là các thành phần của trang web hay ứng dụng như: Header, Body, Footer, Content…

+ Quy tắc đặt tên Block:

• Tên của Block có thể bao gồm cả chữ cái Latin, chữ số hoặc dấu gạch ngang 

• VD: <div class= “header">…</div> /* Block */

- Element: là một phần tử trong Block và có thể tồn tại độc lập hoặc bên trong các phần tử khác. Các phần tử được liên kết với Block (khối) bằng cách sử dụng hai dấu gạch dưới (__).

+ Quy tắc đặt tên Element:

• Tên của Element có thể bao gồm cả chữ cái Latinh, các chữ số, dấu gạch ngang, dấu gạch dưới

• VD:  <div class="header"> /* Block */

- Modifier: thường được sử dụng để bổ sung ý nghĩa của Block hoặc Element. Các Modifier được kết nối với Block và Element bằng 2 dấu gạch nối (--)

• VD:  <div class="header"> /* Block */

                <div class="header__nav"> /* Block__element */

                    <a href="#" class="header__nav--item">Trang chủ</a> /* .block__element--modifier */

                    <a href="#" class="header__nav--item">Giới thiệu</a> /* .block__element--modifier */

                    <a href="#" class="header__nav--item">Liên hệ</a> /* .block__element--modifier */

                </div> 

                 </div>

V. Kết Luận

Như vậy, qua bài viết trên đây Tokyo Tech Lab Academy đã giải thích giúp các bạn hiểu rõ hơn về BEM là gì? cũng như hướng dẫn cách đặt tên class CSS theo quy chuẩn BEM. Hy vọng thông qua bài viết này có thể giúp bạn hiểu rõ hơn BEM và áp dụng nó hiệu quả trong công việc. Đừng quên theo dõi chúng tôi để biết thêm nhiều kiến thức bổ ích về ngành công nghệ thông tin nhé.

Bài viết cùng chủ đề: 

▶ Full Stack Developer là gì? Cần học gì để trở thành lập trình viên Full Stack?

▶ Back End Developer là gì? Công việc của một lập trình BackEnd?

▶ Front End Developer là gì? Trở thành lập trình Front End cần kiến thức gì?

▶ Bootstrap Là Gì? Hướng Dẫn Sử Dụng Bootstrap Cơ Bản