Blogブログ

FLOCSS là gì? Cách đặt tên và cấu trúc thư mục theo FLOCSS

Xin chào, mình là T đến từ team WEB!

Công ty mình hiện tại đang quản lý CSS theo tiêu chuẩn của FLOCSS. Do đó, mình đã tìm hiểu và muốn chia sẻ những gì mình đã tìm hiểu đến với mọi người. Hy vọng bài viết của mình sẽ giúp ích được cho các bạn trên con đường tổ chức code hiệu quả hơn nhé!

FLOCSS là gì?

FLOCSS là từ 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.

Cấu trúc thư mục

FLOCSS được cấu tạo bởi 3 layer: Foundation, Layout, Object và các layer con của Object.

Foundation

reset.scss

base.scss

• Định nghĩa style cơ bản bên trong thẻ
• Thêm reset không được định nghĩa ở reset.scss
• Thêm size, font family cơ bản cho chữ

mixin.scss

variable.scss

Layout

• Chỉ định nghĩa layout như vị trí
• Không định nghĩa style cho các thẻ con
• Thiết kế bên trong layout sẽ được định nghĩa tại Project

// ページ全体からみたレイアウトに対するスタイル
.l-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
}
// ヘッダーというパーツのスタイル
.p-header {
	display: flex;
	&__logo {
		width: 100px;
		height: 50px;
		...
	}
	...
}

l-wrapper.scss

l-header.scss

(l-nav.scss)

l-main.scss

• Ví dụ như canh lề hay làm cho cân đối phần fixed của header
• Chỉ định nghĩa phần lề chung trên dưới trái phải

l-container.scss

l-footer.scss

Object

• Các part nhỏ sẽ được định nghĩa bên trong Component
• Các block hay các khu vực lớn kết hợp từ các Component sẽ nằm trong Project

Component

• Không định nghĩa phần lề như margin. Sử dụng như part
• Nên định nghĩa chức năng tối thiểu và cần tránh quy định các đặc điểm riêng về màu sắc, chiều rộng...

Project

• Sử dụng cả khi muốn chia nhỏ để quản lý cả các block không tái sử dụng
• Khi muốn tập hợp các Component nhỏ sử dụng với tư cách là một Object
• Khi quá lớn để định nghĩa là một Component

Sự khác nhau giữa Component và Project

Utility

• Tránh việc làm gia tăng các Object Component và Project một cách vô tận
• Sử dụng trong trường hợp yếu tố quá nhỏ để định nghĩa làm Project, hay khi sử dụng bởi Component độc lập
• Có vai trò định nghĩa khoảng cách với module liền kề như .u-mb10 { margin-bottom: 10px; } thay cho margin mà bản thân Object không được định nghĩa
• Mang vai trò hỗ trợ

Quy tắc đặt tên

Sử dụng tiếp đầu ngữ (chữ cái đầu tiên) (prefix)

Tên file = Tên class

Định nghĩa tên class là .l-header trong file l-header.scss

Không rút gọn tên file, tên class

Áp dụng quy tắc đặt tên của MindBEMding

Sử dụng quy tắc phân chia thành Block, Element, Modifier là syntax của BEM system.
Tuy nhiên, FLOCSS không sử dụng syntax nguyên bản của BEM mà về cơ bản, hoàn toàn lấy ý tưởng từ MindBEMding

Block

• Tên Object
• Đặt tên để ai nhìn vào cũng có thể hiểu

Modifier

Element

--Modifier nối tiếp __Element?

Tên class được tham chiếu, vận hành từ JavaScript

• Đặt tiếp đầu ngữ js- để chỉ rõ việc được tham chiếu từ JavaScript, ví dụ: js-button
• Xử lý js-button bằng JavaScript

• Đặt tiếp đầu ngữ -is
• Xử ký thao tác .is-click bằng JavaScript
• Không định nghĩa style bên trong .is-click mà định nghĩa style bên trong .c-button.is-click
  (Tránh việc đụng với style bên trong .is-click đối với Object khác)

Chú ý việc cascading

• Không được cascading sử dụng selector lấy Object khác làm parent
• Điều đó có nghĩa là không được định nghĩa style của một Project bên trong một Project parent khác

// Component
.c-button {
	...
}
.c-dialog > .c-button {
/*c-dialogを親に持つc-buttonのみスタイルを指定しまっています　→　だめ*/
	...
}
// Project
.p-comments {
	...
}
.p-articles > .p-comments {
/*p-articlesを親に持つp-commentsのみスタイルを指定しまっています　→　だめ*/
	...
}

• Part sử dụng cho nhiều mục đích (ví dụ như c-button...) sẽ trở nên chỉ có thể phát huy tác dụng ở trong Component khác
• Việc tồn tại hỗn độn sẽ làm cho người khác rơi vào lúng túng không biết cái nào mới là style thật sự của c-button, c-button vậy mà khi ở trong element này thì lại khác, muốn sử dụng c-button này mà không thể...

Project có thể thay đổi Component

// c-media.scss
.c-media__image {
	float: left;
	margin-left: 10px;
}
// p-profile.scss
.p-profile > .c-media__image { // ここがだめ
	float: right;
	margin-left: 0;
	margin-right: 10px;
}

// c-media.scss
.c-media__image {
	float: left;
	margin-left: 10px;
}
// p-profile.scss
.p-profile__avatar {
	float: right;
	margin-left: 0;
	margin-right: 10px;
}

Extend trong SASS

.c-button {
	...
}
.c-button--blue {
	@extend .c-button;
	background-color: blue;
}

Nguồn:
https://qiita.com/super-mana-chan/items/644c6827be954c8db2c0
https://github.com/hiloki/flocss