FLOCSS
1. Flocss là gì?
Flocss là quy tắc đặt tên được dùng trong CSS.
2. Tìm hiểu về Flocss
Sử dụng Flocss để đặt tên cho một class là sử dụng các tiền tố (l-,c-,p-,u-,is-) để bắt đầu tên lớp.
Ví dụ: Các class name sau đều được đặt tên theo Flocss
3. Khi nào chúng ta sử dụng tiền tố l-, c-, p-, u-, is- để bắt đầu tên lớp?
3.1. Layout (l-)
Tên class bắt đầu bằng tiền tố l- có nghĩa là lớp layout (bố cục).
Thông thường, bố cục trang web bao gồm: đầu trang (header), chân trang (footer), thanh bên (sidebar), nội dung chính (main content).
Sử dụng tiền tố l- để bắt đầu tên của các lớp này (ví dụ: l-main, l-sidebar...).
Bạn thấy rằng header và footer có tên class bắt đầu bằng tiền tố c- chứ không phải l-. Vì header và footer xuất hiện trên tất cả các trang nên nó thường được gọi là c-header và c-footer chứ ko phải là l-header và l-footer.
3.2. Component (c-)
Tên class bắt đầu bằng tiền tố c- có nghĩa là Class Component (thành phần lớp). Trên một website, bạn phải xác định đâu là Component (Thành phần có thể tái sử dụng, xuất hiện 2 lần trở lên trên trang) và để định dạng css cho các component thì bạn phải đặt tên theo quy tắc là tên Class Component phải bắt đầu bằng tiền tố c-.
Ở ví dụ bên dưới, tiêu đề DummyDummy được tái sử dụng, xuất hiện hai lần trở lên nên nó là một Component.
Giả sử đặt Class Component cho nó là title01 với tiền tố c- là bắt buộc đối với Class Component, nên tên class sẽ là: c-title01.
Ngoài ra, nếu các thành phần chỉ xuất hiện một lần trong thiết kế nhưng có khả năng được sử dụng lại trong tương lai thì đây cũng là một thành phần.
3.3. Project (p-)
Một trang web có nhiều trang, mỗi trang có định dạng riêng.
Để định dạng css cho từng trang, chúng ta cần đặt tên lớp bắt đầu bằng tiền tố p- cho thành phần chính và mỗi phần của trang - trang có bao nhiêu phần được chia phụ thuộc vào cách bạn nhìn vào thiết kế.
Giao diện trang company ở hình trên bao gồm header, footer, sidebar, nội dung chính.
Nội dung chính được chứa trong phần tử main, cho nên đặt tên lớp ở đây bắt đầu bằng tiền tố p- và phần tiếp theo là tên của trang để tránh trùng lặp => p-company.
Nội dung bên trong nội dung chính, bạn có thể chia chúng thành các phần riêng biệt cho định dạng css.
Ví dụ trong trang company, nội dung chính được chia thành 3 phần . Tên class tương ứng của chúng là : p-company1, p-company2,p-company3 là con của p-company với chỉ số tăng dần (1,2,3).
Nếu tên class quá dài hoặc không cần thiết, bạn cũng có thể lượt bỏ tiền tố p-.
3.4. Utility (u-)
Sử dụng lớp Utility bắt đầu bằng tiền tố u-. Thường áp dụng cho các style đơn giản và sử dụng nhiều (như color, margin, padding...). Như ví dụ bên dưới, văn bản đã được đổi thành màu đỏ và in đậm khi sử dụng lớp Utility.
Không sử dụng quá nhiều lớp Utility vì việc bảo trì và sửa chữa từng địa điểm sẽ rất khó khăn.
3.5. Status (is-)
Lớp bắt đầu với tiền tố is- được thêm vào thẻ để định dạng trạng thái đặc biệt cho thẻ đó.
Ví dụ: is-active, is-open, is-hidden, is-current...
Ví dụ: Lớp ".is-open" sẽ được thêm vào khi nhấp vào nút
Ví dụ: Lớp .is-active được thêm vào khi nội dung đang hiển thị khớp với tab được click tương ứng.