BEM và cách đặt tên Class cho element

Dẫn nhập

Ở bài học trước chúng ta đã cùng nhau CONVERT PX SANG REM , từ đó dễ dàng khi tạo responsive webpage hơn nhiều so với việc sử dụng px.

Trong bài này chúng ta sẽ tìm hiểu về BEM và cách đặt tên class cho element.

Nội dung

Để nắm vững bài này các bạn cần:

• Có kiến thức cơ bản về CSS.
• Đã xem qua bài TỔNG QUAN CÁCH HOẠT ĐỘNG CỦA CSS VÀ 3 THỨ ĐỂ TẠO 1 WEBSITE TỐT.
• Đã xem qua bài XỬ LÍ TRÙNG LẶP KHI KHAI BÁO CÁC FEATURES HAY CÁC PROPERTIES CỦA CSS
• Đã xem qua bài TÌM HIỂU QUÁ TRÌNH XỬ LÝ CUỐI CÙNG CỦA CSS

Trong bài này chúng ta sẽ cùng nhau tìm hiểu

• Think – Build – Architect Mindset
• Think (nghĩ về layout trước)
• Build (Đặt tên classes)
• Architect ( Tổ chức folder, sử dụng Sass)

Think – Build – Architect Mindset

Như chúng ta đã nói ở bài TỔNG QUAN CÁCH HOẠT ĐỘNG CỦA CSS VÀ 3 THỨ ĐỂ TẠO 1 WEBSITE TỐT., việc code CSS nên được làm thỏa mãn các tiêu chí: Rõ ràng (Clean), Chia nhỏ thành các phần (Modular), dễ tái sử dụng  (Reusable), và dễ mở rộng (Ready for growth).

Để làm được điều đó ta cần 3 bước:

• Bước 1: THINK suy nghĩ về cách tổ chức code, các layout hiển thị lên webpage và thường sẽ sử dụng wireframe.
• Bước 2: BUILD: Xây dựng code HTML dựa trên wireframe và đặt tên class 1 cách có cấu trúc.
• Bước 3: ARCHITECT: Chia nhỏ các phần CSS thành các file và folder 1 các logic

Think about the layout

• Website sẽ xây dựng dựa trên các component nhỏ (Component - Driven design).
• Những component gắn kết với nhau dựa vào layout của webpage.
• Các component này được xây dựng độc lập và có thể tái sử dụng ở các page khác nhau trong cùng 1 project hoặc các project khác nhau.

Build( Đặt tên class)

Ở đây chúng ta làm quen với BEM (Block Element Modifier)

• Block: tên của component, có nghĩa mô tả tổng thể của component đó
• Element: nó dùng để đặt tên các phần từ bổ trợ cho component (Block)
• Modifier: Các dạng khác biến thể của 1 block hoặc element

.block{}
.block__element{}
.block__element--modifier{}
1
2
3
4

Chúng ta sẽ hiểu rõ hơn qua ví dụ sau:  

<div class="card">
       <h1 class="card__heading--sub">Hello Everyone</h1>
       <h3 class="card__heading--main">Nice to meet you</h3>
       <p class="card__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, sed!</p>
   </div>
1
2
3
4
5
6

Trong đó, chúng ta thấy:

• Block (card) là mô tả toàn bộ component.
• Element (heading, content) chỉ các bộ phận của component này.
• Modifier (sub, main) chỉ ra có 2 loại element (heading) gồm heading chính và heading phụ

Trong Sass sẽ hỗ trợ chúng ta rất nhiều trong việc sử dụng BEM ( chúng ta sẽ tìm hiểu ở những bài học sau)

Vậy qua các phần trên, chúng ta đã thấy được lợi ích của việc sử dụng BEM là giúp tổ chức tốt code CSS, dễ bảo trì, tái sử dụng, tránh tình trạng code chồng chéo lên nhau. Ví dụ như cùng là heading nhưng card heading và header heading khác nhau, …

Architect (Tổ chức folders, Sass)

Sass sẽ hỗ trợ chúng ta trong việc chia code CSS thành các folder và các file chứa các component nhỏ.

Nôm na của mô hình tổ chức chúng ta sẽ chia làm 7 folders và 1 file main.sass chính import tất cả các files trong các folder để compile thành CSS

7 folder ở đây chia thành từng mảng:

1. Base/ (chứa các setting ban đầu)
2. Components/ ( chứa các bộ phận nhỏ dễ tái sử dụng như button, card, …)
3. Layout/ ( chứa footer, navbar,…)
4. Pages/ (chứa tên các page nếu project web của bạn có nhiều page khác nhau vd: home, login, …)
5. Abstracts/ (chứa animation, các function, mixin khi sử dụng sass sẽ được đề cập kĩ hơn khi chúng ta làm quen với sass)
6. Themes/ (các mẫu có sẵn)
7. Vendors/ (code CSS bên ngoài như bootstrap, …)

Lưu ý: Không phải lúc nào chúng ta cũng sử dụng hết 7 folders này ( ví dụ themes/ sẽ không được sử dụng trong khóa học của chúng ta) nhưng chúng sẽ đều sẽ được chia thành các phần nhỏ vào 1 trong 7 folders này.

Kết luận

Ở bài học này chúng ta đã cùng nhau tìm hiểu về BEM và cách cấu trúc code CSS.

Ở bài học sau, để hiểu rõ hơn cách sử dụng BEM, chúng ta sẽ ỨNG DỤNG NÓ VÀO PROJECT CỦA CHÚNG TA.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: "Luyện tập – Thử thách – Không ngại khó".

---

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học BEM và cách đặt tên Class cho element dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK