Long time no see. Lâu lâu rãnh rỗi tranh thủ vọc vạch ngồi viết bài mới cho các bạn, đặc biệt là các độc giả hay theo dõi blog mình cũng như các bạn newbie mới vào. Mấy nay lướt nhóm Facebook thấy nhiều bạn bị vướng chỗ cách đặt tên trong CSS. Nên cố gắng tìm hiểu để viết một bài về nó cho các bạn tham khảo.
Chắc hẳn là khi các bạn tham gia một dự án web, hay là đọc mã nguồn của một trang web. Các bạn có lẽ sẽ thấy các classes của website hay trong dự án được đặt tên theo một chuẩn nào đó chẳng hạn như là .header__top
, .header-bottom
hay .header--secondary
….
Các bạn sẽ tự hỏi rằng tại sao họ lại làm như vậy? Tại sao đặt tên trong CSS mà lại dài dòng như thế sao không code dạng như nav ul li
cho nó lẹ…. Qua tìm hiểu thì các bạn biết được rằng việc đặt tên như vậy gọi là BEM. Vậy BEM là gì ? Chúng ta hãy cùng nhau tìm hiểu nhé.
# Khái niệm
BEM là một quy ước đặt tên, giúp cho việc code Frontend dễ đọc và dễ hiểu hơn, dễ làm việc và dễ mở rộng cũng như bảo trì. Việc đặt tên chuẩn giúp các bạn hiểu được đoạn code đó có ý nghĩa gì, nó thực hiện nhiệm vụ gì. Từ đó những người khác khi đọc vào code của bạn họ cũng hiểu được bạn đang làm gì, từ đó dễ dàng phân tích, thay đổi và quản lý hơn sau này.
.nav ul li {} // ảnh hưởng đến nhiều thành phần li khác trong nav .nav{} // style cho thẻ nav có class .nav .nav__list{} // style cho thẻ ul có class .nav__list .nav__item{} // style cho thẻ li có class .nav__item
Các bạn vẫn chưa hiểu? Sau đây là một ví dụ đơn giản để các bạn dễ hình dung hơn nhé.
# Giải thích
Đây là một Stick Man, chúng ta hãy coi nó là một Block, Block là đại diện cho chữ cái đầu tiên trong BEM nhé. Như tên gọi của nó ta có thể đặt class cho nó là .stick-man
Tiếp theo là chữ E trong BEM nghĩa là Elements tức là những thành phần có trong Stick Man này, như là cái đầu(head), tay(arm), chân(feet), cơ thể(body)… Lúc này chúng ta sẽ có các class như là .stick-man__head
, .stick-man__arm
, .stick-man__feet
…. Lúc này các bạn có thể thấy là Element theo sau 2 dấu gạch dưới __ của Block. Cấu trúc tạm thời lúc này ta có .Block__Element
Cuối cùng là chữ M nghĩa là Modified nghĩa là các biến thể của Block hoặc Element của Block cụ thể ở đây là .stick-man
, hay .stick-man__head
ví dụ Stick Man hiện tại là màu hồng, chúng ta muốn nó là màu xanh hay là màu đỏ thì theo sau Block là 2 dấu gạch ngang — ví dụ .stick-man--blue
, .stick-man--red
. Ta có cấu trúc .Block–Modified
Tuy nhiên mình lại muốn thay đổi cái đầu(head) to ra thôi thì lúc này Modified phải theo sau Element là head thay vì Block như sau .stick-man__head--big
hay tay dài ra ta có .stick-man__arm--long
, .stick-man__head--small
cho đầu nhỏ lại. Ta có cấu trúc .Block__Element–Modified
# Tại sao lại sử dụng BEM ?
Như mình đã nói ở trên, việc đặt tên rất quan trọng và cũng rất khó. Không phải đặt tên loạn xạ là được đâu, khó cho sau này các bạn bảo trì hay người khác đọc code của bạn. Việc đặt tên cũng tốn thời gian lắm, phải suy nghĩ tên sao hợp lý, người khác đọc vào hiểu mà không phải suy nghĩ lâu quá.
Đa số đặt tên là theo tiếng Anh cho nên mình nghĩ các bạn cũng nên có vốn từ vựng về tiếng Anh nhé để đặt cho chuẩn chớ đừng đặt tên theo Tiếng Việt như là .menu-phia-tren
hay .footer-o-duoi
nhé ^^!
# Ví dụ đơn giản
Ví dụ đơn giản mình sẽ demo hai buttons đơn giản với cấu trúc HTML như sau:
<button class="btn btn--primary">primary</button> <button class="btn btn--secondary">primary</button>
Nhìn vào các bạn dễ hiểu là class .btn
là block còn .btn--primary
là modifed với class .btn
thì chúng ta sẽ style giống nhau khi sử dụng class này, còn với modified --primary
hay --secondary
chúng ta sẽ có style khác nhau để phân biệt như sau:
.btn{ display: inline-block; border: 0; outline: none; color: white; text-align: center; padding: 10px 20px; cursor: pointer; } .btn--primary{ background-color: blue; } .btn--secondary{ background-color: red; }
# Tạm kết
Như vậy mình đã giải thích xong về BEM một cách đơn giản dễ hiểu cho các bạn. Hi vọng các bạn sẽ hiểu được phần nào cho việc đặt tên trong css cho các class, cũng như độ quan trọng của nó trong việc code website. Mình hi vọng với kiến thức ít ỏi của mình sẽ giúp cho các bạn phần nào trong việc trở thành một Frontend Dev thực thụ trong tương lai. Cuối cùng chúc các bạn một ngày tốt lành.
Bài viết có tham khảo từ Medium
.
Web ko có nút like hay thả tim nhỉ, thả tim bay vèo vèo luôn cho ad
Cám ơn bạn nhiều nhé <3
Lỗi font unicode đọc khó chịu quá anh ơi
Do máy của em chứa trùng Font với Blog anh đó em, chớ font Montserrat của Google hỗ trợ hoàn toàn Tiếng Việt nhé. Em xoá Font “Montserrat” trong máy em là được
Anh ơi cho e hỏi làm thế nào khi mình đang ở trang home và click vào phần sản phẩm thì trang nó chuyển sang phần sản phẩm ạ? Cho e xin key ạ! Nó có liên quan đến backend k ạ? Thanks
Nếu em làm với database thì liên quan tới Backend. Còn nếu làm UI thôi thì không cần, chỉ cần chèn Link tới thôi.
hay thật sự. đọc bao nhiêu trang dài dòng khó hiểu, đọc của anh phát hiểu luôn. giờ ko vất vả nghĩ tên đặt cho class nữa. Cảm ơn anh nhiều!
Cám ơn em nè. Cố gắng nhé
Bài viết chất lượng. hay vd
.stick-man__arm__hand__finger__nail–red
trong trường hợp còn nhiều phần tử nhỏ lồng nhau thì đặt tên như trên có đúng k a ? mong a trả lời <3
Không em, việc đặt tên là để làm sao ngắn gọn và người khác hiẻu, arm, hand, finger, nail là elements nên nếu đặt phải là .stick-man__arm, .stick-man__hand chứ ko ai đặt như trên của em cả.
ngon
link hình die rồi ad ơi