Cách đặt tên class trong html
-
1. GIỚI THIỆU BEM
Trên các trang web nhỏ, cách bạn tổ chức các style của mình thường không phải mối quan tâm lớn. Tuy nhiên, đối với các dự án lớn hơn, phức tạp hơn, cách bạn tổ chức code của mình là chìa khóa để đạt được hiệu quả cao hơn, nó sẽ ảnh hưởng đến việc bạn mất bao lâu để viết code, bạn sẽ phải viết bao nhiêu code và trình duyệt của bạn sẽ phải tải bao nhiêu. Điều này trở nên đặc biệt quan trọng khi bạn làm việc với nhóm các lập trình viên chuyên nghiệp và khi hiệu suất cao là điều cần thiết.Có nhiều phương pháp nhằm mục đích giảm lượng CSS, giúp bảo trì cơ sở mã CSS lớn tốt hơn và hỗ trợ cho việc hợp tác giữa các lập trình viên hiệu quả hơn, như OOCSS, AMCSS, SMACSS, SUITCSS, BEM, Atomic,…
Tại sao nên chọn BEM?
Cho dù bạn chọn sử dụng phương pháp nào trong các dự án của mình, thì việc dùng CSS và UI có cấu trúc hơn cũng sẽ mang lại lợi ích cho bạn.Bạn đang xem: Cách đặt tên class trong html
“Lý do tôi chọn BEM mà không phải các phương pháp khác là do BEM ít gây nhầm lẫn hơn các phương pháp khác (SMACSS) nhưng vẫn cung cấp cho chúng ta cấu trúc tốt mà chúng ta muốn (OOCSS) với một thuật ngữ dễ nhận biết.” – theo Mark McDonnell trong “Maintainable CSS with BEM”.
BEM là gì?
BEM là tên viết tắt của: Block, Element, Modifier, là một phương pháp giúp bạn tạo ra các components có thể tái sử dụng và chia sẻ code trong phát triển front-end.Tên class BEM bao gồm 3 thành phần: block, element và modifier (có thể hiểu là: khối, phần tử và sửa đổi). Trong bài này, tên các thành phần của BEM sẽ được giữ nguyên tên theo tiếng Anh cho dễ hình dung.Nếu cả ba được dùng chung thì tên class BEM sẽ như thế này: block__element--modifierĐịnh nghĩa block, element, modifier
2. QUY TẮC ĐẶT TÊN
Chỉ có hai vấn đề khó khăn trong Khoa học máy tính: vô hiệu hóa bộ đệm và đặt tên cho mọi thứ._Phil Karlton_Thực tế là, hầu hết các cơ sở mã CSS đôi khi được phát triển mà không có bất kỳ cấu trúc hoặc quy ước đặt tên cụ thể nào. Điều này dẫn đến việc cơ sở mã CSS không thể khắc phục được trong thời gian dài.BEM đảm bảo rằng tất cả những người tham gia phát triển một trang web đều hoạt động với một cơ sở mã duy nhất và dùng cùng một ngôn ngữ. Sử dụng cách đặt tên phù hợp sẽ giúp bạn có chuẩn bị tốt hơn cho những thay đổi trong thiết kế của trang web sau này.Xem thêm: Cách Lọc Bạn Bè Trên Facebook Bằng Máy Tính, Cách Lọc Bạn Be Trên Facebook Bằng Máy Tính 2020
Quy tắc, cách sử dụng BEM đối với block, element, modifier
BLOCK
Quy tắc đặt tênTên block có thể bao gồm các chữ cái Latinh, chữ số và dấu gạch ngang.Tạo CSS class: thêm một tiền tố vào phía trước. VD: .blockHTMLBất kỳ node (nút) DOM nào cũng có thể là một block nếu nó có một class name.VD:Cách dùng trong CSSChỉ sử dụng bộ chọn classKhông dùng tên tag (thẻ) hoặc idKhông phụ thuộc vào các block/element khác trên một trangVD:.block { color: #042; }
ELEMENT
Quy tắc đặt tênTên element có thể bao gồm các chữ cái Latinh, chữ số, dấu gạch ngang và dấu gạch dưới.Tạo class CSS: tên block cộng với hai dấu gạch dưới, cộng với tên element.VD:.block__elemHTMLBất kỳ node DOM nào trong một block đều có thể là một element.Trong một block nhất định, tất cả các element đều bằng nhau về mặt ngữ nghĩa.VD:Cách dùng trong CSSChỉ sử dụng bộ chọn classKhông dùng tên tag (thẻ) hoặc idKhông phụ thuộc vào các block/element khác trên một trangVD:- Nên:.block__elem { color: #042; }- Không nên:.block .block__elem { color: #042; }div.block__elem { color: #042; }
MODIFIER
Quy tắc đặt tênTên của modifier có thể bao gồm các chữ cái Latinh, chữ số, dấu gạch ngang và dấu gạch dưới.Tạo class CSS: tên block hoặc element cộng với hai dấu gạch ngang, cộng với tên modifier.Dấu cách trong các modifier dài (chứa 2 tiếng trở lên) được thay thế bằng dấu gạch ngang.VD:.block--mod { }.block__elem--mod { }.block--color-black { }.block--color-red { }HTMLModifier là tên class mà bạn thêm vào node DOM block/element.Tăng thêm các modifier class vào các block/element mà chúng ta cần sửa đổi và giữ lại class ban đầu của block/element đó.VD:- Nên (thêm các class mới có chứa modifier, và giữ nguyên class cũ .block):Cách dùng trong CSSSử dụng modifier class làm bộ chọn CSS. VD:.block--hidden { }Thay đổi các element dựa trên block có chứa modifier. VD:.block--mod .block__elem { }Element có modifier. VD:.block__elem--mod { }
3. CÁC VÍ DỤ
VD1: Giả sử bạn có một block là form với modifier (phần bạn muốn sửa đổi) là theme: "xmas" và simple: true.Trong block form chứa các element là input và submit. Trong đó, element submit có modifier của riêng nó là disabled: true (mục đích là không cho phép gửi form đi khi chưa được điền), thì HTML và class CSS khi đó được viết như sau:HTML CSS.form { }.form--theme-xmas { }.form--simple { }.form__input { }.form__submit { }.form__submit--disabled { }VD2: Hãy xem cách một phần tử cụ thể trên trang được triển khai trong BEM như thế nào. Chúng ta sẽ lấy ví dụ từ button (nút) trên GitHub:
Chúng ta có thể có một button bình thường (Normal button) cho các trường hợp thông thường và hai trạng thái khác cho các trường hợp khác nhau (Success button, Danger button). Chúng ta có thể tạo ra các button bằng cách sử dụng bất kỳ tag (thẻ) nào chúng ta muốn (button, a hoặc thậm chí là div), sau đó chúng ta style cho block bằng bộ chọn class với BEM.Theo quy tắc đặt tên của BEM, chúng ta sử dụng cú pháp block--modifier-value.HTMLNormal buttonSuccess buttonDanger buttonCSS.button {display: inline-block;border-radius: 3px;padding: 7px 12px;border: 1px solid #D5D5D5; background-image: linear-gradient(#EEE, #DDD); font: 700 13px/18px Helvetica, arial;}.button--state-success {color: #FFF; background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;border-color: #4A993E;}.button--state-danger {color: #900;}LƯU Ý QUAN TRỌNG KHI SỬ DỤNG BEM
BEM không có mục đích phản ánh cấu trúc lồng nhau của các block, các element.Giả sử: Một block chứa element 1, element 1 chứa element 2, element 2 chứa element 3. Khi đó, tên class của block và element nên đặt như sau:HTMLCSS.block {}.block__elem1 {}.block__elem2 {}.block__elem3 {}Đặt class như vậy, sẽ làm cho các element chỉ phụ thuộc vào block. Sau này, nếu bạn muốn thay đổi giao diện, bạn có thể dễ dàng di chuyển vị trí của các element trong block, cấu trúc của block DOM lúc này tuy đã thay đổi nhưng bạn không phải lo sửa code CSS ban đầu.
Xem thêm: Cách Luộc Trứng Gà La Cót Cách, Luộc Trứng Mấy Phút