Bem là gì ? Quy tắt đặt tên cho CSS

24/11/2021 | Tin tức

BEM là viết tắt của Block-Element-Modifier, là quy chuẩn đặt tên cho các lớp css. BEM giúp cho việc code FontEnd trở nên dễ hiểu hơn, giúp các lập trình viên làm việc chung với nhau trên một dự án dễ dàng hơn nhờ những quy tắt và tiêu chuẩn trong việc đặt tên mang lại.

BEM là viết tắt của Block-Element-Modifier, là quy chuẩn đặt tên cho các lớp css. BEM giúp cho việc code FontEnd trở nên dễ hiểu hơn, giúp các lập trình viên làm việc chung với nhau trên một dự án dễ dàng hơn nhờ những quy tắt và tiêu chuẩn trong việc đặt tên mang lại. Hãy tưởng tượng nhiều người trong một dự án có nhiều người làm mà mỗi người lại đặt tên theo 1 cách khác nhau thì @@ .

Vì thế cần phải có một quy tắt trong việc đặt tên và BEM giúp ta có thể làm điều đó. Tuy theo ý kiến của nhiều người khi dùng quy tắt BEM để đặt tên thì làm cho code trở nên xấu. Nhưng khi bỏ qua vấn đề đó thì BEM vẫn là 1 sự lựa chọn khá ổn cho các lập trình viên có thể làm việc chung với nhau hiệu quả hơn.

Tại sao nên dùng BEM ?

  • BEM giúp cho cả team làm việc với nhau dễ dàng : Khi làm việc team với nhau mỗi người sẽ có 1 cách đặt tên các class khác nhau và việc này dễ dẫn đến 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.
  • Module: 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 đến class khác.
  • Khả năng tái sử dụng: Bạn có thể code 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 dư thừa.
  • Cấu trúc: BEM cung cấp cho 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 trong BEM

.block{}
.block__element {}
.block--modifier {} // .block__element--modifler{}

  1. Block: Là một thành phần của trang web, 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.
  2. Element: 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ó.
  3. Modifler: Được dùng để thao tác thay đổi cách hiển thị trên block hoặc phần tử. Ví dụ muốn tạo thêm một block .block__element khác nữa và muốn làm nổi bật nó thì sẽ thêm một class .block__element--color để tạo sự khác biệt đó

Tổng kết

Qua bài viết về BEM trên mình muốn chia sẽ đến các bạn 1 cách để mọi người có thể làm việc teamwork với nhau hiệu quả hơn và áp dụng trong các dự án thực tế. Nghe thì có vẻ khá là hàn lâm và hơi khó hiểu một chút @@, nhưng nó không hề khó, chỉ cần bạn xác định và phân tích 1 chút về dự án thì sẽ xác định được cách đặt tên chính xác.

Nhiều lượt xem

Vòng đời của laravel
25/11/2021 | Tin tức

Vòng đời request Laravel (Request lifecycle...

Bem là gì ? Quy tắt đặt tên cho CSS
24/11/2021 | Tin tức

BEM là viết tắt của Block-Element-Modifier,...

Hướng dẫn cài đặt laravel DebugBar
22/11/2021 | Tin tức

Trong bài viết hôm nay mình sẽ hướng...

Những extension hay ho cho VSCode
21/11/2021 | Tin tức

Visual studio code là một trình soạn thảo...