Khi bắt đầu dự án frontend với HTML/CSS thì việc tổ chức một thư mục chứa các thành phần CSS rất quan trọng vì nó giúp bạn tìm kiếm được những thành phần cần chỉnh sửa sau này, thay vì chỉ có một file style.css và mò từ trên xuống dưới.
Sử dụng @import là thế mạnh của CSS và @import các phần CSS và file vào 1 file là main.scss ( nếu bạn dùng Sass) hoặc main.less ( nếu bạn dùng Less ) và convert sang main.css ( bạn có thể dùng Koale làm việc này ).
Cấu trúc folder bạn có thể tham khảo và tổ chức như sau:
- base: Nơi chứa các css cơ bản khi start mọi dự án, bạn cần phải đảm bảo các trình duyệt hiển thị giống nhau ví dụ: reset, typography, utilities, animation
- components: Nơi chứa các css về các thành phần như Button, Form, Popup, Nav ..
- layout: Nơi chứa các phần chính của trang như: header, footer, navigation, section
- helpers: Nơi chứa các function, variable, mixin
- pages: Nơi chưa những phần khác nhau của mỗi page, nếu mỗi page có đặc điểm khác nhau bạn sẽ code ở đây
- vendors: Nơi chứa các bên thứ 3 ( third party ) như Bootstrap, Font Awesome... những phần mà không phải bạn code
Ví dụ mình tạo file main.less với nội dung cơ bản sau:
@import "base/reset.less",
@import "base/typography.less",
@import "base/base.less",
@import "components/button.less",
@import "components/form.less",
@import "layout/header.less",
@import "layout/footer.less",
@import "layout/session.less",
@import "helpers/variables.less",
@import "helpers/mixin.less",
@import "pages/page.less",
@import "pages/home.less",
@import "vendors/bootstrap/bootstrap.less",
.huynhtong {
display: block;
}
Và mọi thứ sẽ được xuất ra một file là main.css nhờ công cụ miễn phí Koala bạn có thể tải tại đây
Cám ơn bạn đã đọc bài viết, hi vọng qua bài viết này, bạn có thể sử dụng để tổ chức code CSS tốt hơn :)
