FLOCSS
FLOCSS là gì?
FLOCSS là quy tắc đặt tên được dùng trong CSS.
FLOCSS là viết tắt của "Foundation Layout Object CSS", là sự kết hợp ưu điểm của OOCSS, BEM, SMACSS và SuitCSS. FLOCSS cũng nhận ảnh hưởng lớn từ cấu tạo layer của MCSS.
Vì sao sử dụng FLOCSS
- FLOCSS giúp chúng ta hiểu được vai trò, vị trí, chức năng... của các phẩn tử HTML.
- Tổ chức cấu trúc thư mục và tập tin rõ ràng giúp dễ dàng tìm kiếm, chỉnh sửa và tái sử dụng code.
Cách sử dụng 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-, js-) để bắt đầu tên lớp.
<[l-, c-, p-, u-, is-, js-]> + <tên_class>
Đặt tên class làm sao để ai nhìn vào cũng có thể hiểu được, hạn chế rút gọn tên class.
Ví dụ: Các tên class sau đều được đặt tên theo FLOCSS
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.
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.
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-.
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.
Status (is-)
Lớp bắt đầu với tiền tố is- được thêm vào phần tử HTML để định dạng trạng thái đặc biệt cho phần tử đó.
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.
Javascript (js-)
Khi phần tử HTML có những xử lý bằng Javascript, chúng ta sẽ đặt tên lớp bắt đầu với tiền tố js-.
Class này không dùng để style CSS, thường để nó đứng đầu trong danh sách các classes để dễ nhận diện.
Ví dụ: Xử lý ẩn/hiện nội dung khi click vào button