BEM (Block-Element-Modifier) hiểu đơn giản nó là một quy ước đặt tên trong CSS. Nó giúp cho việc code CSS trở nên dễ đọc, dễ bảo trì và tránh bị đè thuộc tính khi bị trùng tên class, …
Hữu ích là thế nhưng mình vẫn còn thấy nhiều người không biết viết BEM sao cho đúng, hay có một vài người còn không thèm viết BEM 😵😵
Vì thế trong bài viết này, mình sẽ chỉ cho các bạn các lỗi sai phổ biến và hướng dẫn cách viết BEM sao cho đúng, chuẩn và hiệu quả nha.
Bắt đầu thôi !!!
Sai lầm giữa phần Block và Element
Một sai lầm nhỏ thôi nhưng thấy có nhiều người bị như này. Nếu như các 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.
❌ Không đúng vì .header đang thể hiện rằng đây là một block mới
<div class="card">
<div class="header">
<h2 class="card__headline"></h2>
</div>
</div>✅ Chuẩn hơn nè
<div class="card">
<div class="card__header">
<h2 class="card__headline"></h2>
</div>
</div>.card_header giờ đây đang thể hiện rằng nó là element thuộc khổi block .card kia.
Sau phần Element lại có thêm thẻ con, thẻ cháu ?
Có những lúc khi viết BEM gặp trường hợp sau phần element nó lại có thêm thẻ cháu, chắt, chút, chít … thì phải viết như nào? Chả nhẽ cứ viết 2 gạch __ như block__element__child1__child2__ trông nó như cách 2 mét khi xếp hàng trong lúc dịch covid vậy :(((
❌ Không đúng vì viết như này sẽ kiến tên class khi thêm modifier quá dài
<div class="card">
<div class="card__header">
<h2 class="card__header__headline"></h2>
</div>
</div>✅ Thay vào đó thì cứ viết element như bình thường
<div class="card">
<div class="card__header">
<h2 class="card__headline"></h2>
</div>
</div>Viết modifier sao cho đúng ?
Khi viết modifier thì bắt buộc phải có phần block hoặc element trước nó.
❌ Không đúng vì trước modifier phải có block hoặc element
<div class="card--highlight">
<div class="card__header"></div>
</div>
<div class="card">
<div class="card__header--important"></div>
</div>✅ Chuẩn hơn rùi nè :))
<div class="card card--highlight">
<div class="card__header"></div>
</div>
<div class="card">
<div class="card__header card__header--important"></div>
</div>Phải làm sao khi block quá lớn ?
Sử dụng BEM vào một khổi quá lớn, có rất nhiều thẻ con là một điều hơi cố chấp. BEM sinh ra là để tạo ra các khổi module vừa, nhỏ và có thể tái sử dụng.
Nên không phải lúc nào cũng sử dụng BEM, đây có thể là nhược điểm của BEM chăng ??
❌ Trong trường hợp này sử dụng BEM lại không hợp lý lắm =((
<div class="body">
<header class="body__header"></header>
<main class="body__main"></main>
<footer class="body__footer"></footer>
</div>✅ Với trường hợp này thì nên tách thành các block nhỏ hơn cho đời nó thanh thản 😘😘
<div class="body">
<header class="header"></header>
<main class="main"></main>
<footer class="footer"></footer>
</div>Và đó là các lỗi mà mình thấy nhiều người bắt đầu học viết BEM trên CSS gặp phải. Hi vọng bài viết này có ích với bạn 😍😍
Tham khảo từ dev.to
