Cách Đặt Tên Class Trong Html

      17

1. GIỚI THIỆU BEM

Trên những trang website nhỏ, cách các bạn tổ chức các style của chính mình thường chưa hẳn mối ân cần lớn. Tuy nhiên, đối với các dự án lớn hơn, phức tạp hơn, phương pháp bạn tổ chức triển khai code của chính mình là chiếc chìa khóa để đạt được hiệu quả cao hơn, nó sẽ tác động đến việc bạn mất bao lâu nhằm viết code, bạn sẽ phải viết từng nào code với trình trông nom của bạn sẽ phải tải bao nhiêu. Điều này trở nên quan trọng quan trọng khi bạn làm bài toán với nhóm những lập trình viên chuyên nghiệp và khi năng suất cao là vấn đề cần thiết.Có nhiều cách thức nhằm mục tiêu giảm lượng CSS, giúp gia hạn cơ sở mã CSS lớn tốt hơn và cung ứng cho việc hợp tác giữa các lập trình viên công dụng hơn, như OOCSS, AMCSS, SMACSS, SUITCSS, BEM, Atomic,…

Tại sao nên chọn BEM?

Cho dù chúng ta chọn sử dụng phương thức nào trong những dự án của mình, thì câu hỏi dùng CSS và UI có cấu trúc hơn cũng trở nên mang lại tác dụng cho bạn.

Bạn đang xem: Cách đặt tên class trong html

“Lý bởi tôi lựa chọn BEM mà không phải các cách thức khác là do BEM ít khiến nhầm lẫn rộng các phương thức khác (SMACSS) nhưng vẫn cung cấp cho bọn họ cấu trúc giỏi mà họ muốn (OOCSS) với 1 thuật ngữ dễ nhấn biết.” – theo Mark McDonnell vào “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 nên các components rất có thể tái sử dụng và share code trong cách tân và phát triển front-end.Tên class BEM bao gồm 3 thành phần: block, element và modifier (có thể đọc là: khối, bộ phận và sửa đổi). Trong bài bác này, tên những thành phần của BEM sẽ được giữ nguyên tên theo giờ Anh mang đến dễ hình dung.Nếu cả ba được sử dụng chung thì thương hiệu class BEM sẽ như vậy này: block__element--modifier

Định nghĩa block, element, modifier

Thành phầnBlock (Khối)Element (Phần tử)Modifier (Sửa đổi)Định nghĩaLà thực thể chủ quyền có ý nghĩa riêng. Tuy các block có thể được lồng vào nhau và cửa hàng với nhau, tuy vậy về mặt ngữ nghĩa những block vẫn bình đẳng, không tồn tại sự ưu tiên hoặc trang bị bậc.Là một phần của block cùng không có ý nghĩa sâu sắc độc lập, hay rất có thể coi element là thành phần con của block, element được đính về phương diện ngữ nghĩa với block của nó.Là sửa đổi trên một block hoặc element, được sử dụng để thay đổi vẻ ngoài, hành động hoặc tâm lý của block giỏi element đó.Ví dụheader, container, menu, checkbox, inputmenu item, menu item, checkbox caption, header titledisabled, highlighted, checked, fixed, size big, color yellow

2. QUY TẮC ĐẶT TÊN

Chỉ tất cả hai vấn đề khó khăn trong kỹ thuật máy tính: loại bỏ hóa bộ đệm với đặt tên cho phần lớn thứ._Phil Karlton_Thực tế là, phần đông các cửa hàng mã CSS thỉnh thoảng được cải tiến và phát triển mà không có ngẫu nhiên cấu trúc hoặc quy mong đặt tên ví dụ nào. Điều này dẫn đến sự việc cơ sở mã CSS quan trọng khắc phục được trong thời gian dài.BEM đảm bảo rằng toàn bộ những người tham gia trở nên tân tiến một trang web đều vận động với một các đại lý mã độc nhất và dùng cùng một ngôn ngữ. Sử dụng cách để tên tương xứng sẽ giúp bạn có sẵn sàng tốt hơn mang đến những đổi khác trong kiến thiết của website sau này.

Xem thêm: Khóa Luận Kế Toán Chi Phí Sản Xuất Và Tính Giá Thành Sản Phẩm Xây L…

Quy tắc, cách áp dụng BEM so với block, element, modifier

BLOCK

Quy tắc đặt tênTên block có thể bao gồm các vần âm Latinh, chữ số cùng dấu gạch men ngang.Tạo CSS class: thêm 1 tiền tố vào phía trước. VD: .blockHTMLBất kỳ node (nút) DOM làm sao cũng hoàn toàn có thể là một block trường hợp nó gồm một class name.VD:
Cách sử dụng trong CSSChỉ thực hiện bộ lựa 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 bao gồm thể bao gồm các vần âm Latinh, chữ số, vết gạch ngang cùng dấu gạch ốp dưới.Tạo class CSS: tên block cùng với hai vệt gạch dưới, cùng với thương hiệu element.VD:.block__elemHTMLBất kỳ node DOM nào trong một block đều rất có thể là một element.Trong một block nhất định, toàn bộ các element đều đều bằng nhau về khía cạnh ngữ nghĩa.VD:
Cách dùng trong CSSChỉ thực hiện bộ chọn classKhông cần sử dụng tên tag (thẻ) hoặc idKhông phụ thuộc vào vào những block/element không giống 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 cùng dấu gạch ốp 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 số modifier lâu năm (chứa 2 tiếng đồng hồ trở lên) được sửa chữa thay thế bằng lốt gạch ngang.VD:.block--mod .block__elem--mod .block--color-black .block--color-red HTMLModifier là tên gọi class mà các 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à họ cần sửa thay đổi và lưu giữ class thuở đầu của block/element đó.VD:- buộc phải (thêm các class mới tất cả chứa modifier, và giữ nguyên class cũ .block):
Cách cần sử dụng trong CSSSử dụng modifier class làm cỗ chọn CSS. VD:.block--hidden Thay đổi các element dựa vào block gồm 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à size với modifier (phần bạn muốn sửa đổi) là theme: "xmas" và simple: true.Trong block size chứa những element là input với submit. Vào đó, element submit gồm modifier của riêng biệt nó là disabled: true (mục đích là không chất nhận được gửi khung đ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 coi cách 1 phần tử rõ ràng trên trang được triển khai trong BEM như thế nào. Chúng ta sẽ đem ví dụ từ button (nút) trên GitHub:Chúng ta hoàn toàn có thể có một button thông 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 biệt (Success button, Danger button). Bạn cũng có thể tạo ra những button bằng phương pháp sử dụng bất kỳ tag (thẻ) nào họ muốn (button, a hoặc thậm chí là div), sau đó bọn họ style mang lại block bởi bộ chọn class cùng với BEM.Theo quy tắc khắc 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 liêu TRỌNG lúc SỬ DỤNG BEM

BEM không tồn tại mục đích phản nghịch ánh kết cấu lồng nhau của các block, các element.Giả sử: Một block đựng element 1, element 1 cất element 2, element 2 đựng element 3. Lúc đó, thương hiệu class của block và element nên được sắp xếp như sau:HTML
CSS.block .block__elem1 .block__elem2 .block__elem3 Đặt class như vậy, đang làm cho các element chỉ phụ thuộc vào vào block. Sau này, nếu bạn muốn thay thay đổi giao diện, chúng ta cũng có thể dễ dàng dịch chuyển vị trí của các element vào block, cấu tạo của block DOM lúc này tuy đã đổi khác nhưng bạn chưa phải lo sửa code CSS ban đầu.

4. LỢI ÍCH lúc SỬ DỤNG BEM

Mô-đunTái sử dụngCấu trúcStyle của block không nhờ vào vào các phần tử khác trên một trang, bởi vậy các bạn sẽ không lúc nào gặp vấn đề từ những việc xếp tầng.Bạn cũng có thể chuyển các block từ dự án công trình đã xong xuôi của bản thân sang các dự án mới.Bạn có thể tạo ra những block độc lập, thành lập thành một thư viện các block để tái thực hiện chúng. Điều này để giúp cho CSS của khách hàng trở nên kết quả hơn với làm bớt lượng code CSS mà bạn sẽ phải bảo trì.BEM cung ứng cho code CSS của bạn một cấu trúc bền vững và kiên cố mà vẫn đơn giản và dễ dàng hiểu.
Tham khảo: getbem.com
hotlive |

https://hi88n.com/