0
Hỏi về QUẢN LÝ CSS cho project reactjs có NHIỀU PAGE
Ở bước sơ khai là làm html css thì mỗi tệp html phải có mỗi file css riêng phải ko ạ? Nghĩa là index.html dùng index.css, tương tự thì about.html dùng about.css vân vân.
Sau đó, khi đến bước react và component hóa thì mình gặp phải 1 vấn đề là: tất cả đều import vào App.js thì nó sẽ bị đè css, nghĩa là css của about nó sẽ đè lên css của index.css
Có cách nào để quản lý chúng không bị đè nhau ạ? Mình dùng trick là trang about sẽ viết css trực tiếp chứ ko tách file, nhưng cách này làm code bị rối quá. Help ạ.
Thêm một bình luận
4 CÂU TRẢ LỜI
+7
Hiện tại với dự án mình làm có số lượng component tương đối lớn. Với mỗi component thì sẽ có 1 file css riêng và import vào component đấy. Tuy nhiên, cách viết css phải là theo chuẩn BEM. Ví dụ như file about.css thì các class sử dụng phải viết theo dạng .about__header, .about__container ... Nếu bạn viết như này thì đến lúc build thì sẽ không bị trùng style vì bạn có tên class cha là .about bao bọc rồi. Để dùng BEM như vậy thì bạn cũng nên tìm hiểu sass hay scss.
Bạn có thể tham khảo bài viết sau:
https://viblo.asia/p/tim-hieu-ve-bem-gioi-thieu-qzaGzNMzGyO
https://viblo.asia/p/sass-va-scss-ban-chon-gi-part-1-gAm5yR1XKdb
Cho mình hỏi cách bạn tổ chức thư mục tí ,mỗi component có 1 file css riêng, vậy file css này b sẽ đặt ở đâu:
-
Đặt ở trong cùng thư mục với file js, ví dụ ------Folder about --------- about.js ---------- about.css
-
Hay gom chung các file css của các component và đặt vào cùng 1 folder
Mình hay dùng cách 1, để mỗi lần xem đến component nào là thấy được luôn file css của nó, khỏi phải lục tìm file css. Không biết cách tổ chức trong project lớn như thế nào nhỉ ?
@tomhagen Bên mình làm theo cách 1 nhé. Đến lúc tìm lại cũng rất là thuận tiện.
+1
Thật ra bạn có import bao file vào App.js thì cũng không bị ghi đè được nêu bạn không viết tên class trùng nhau. Vấn đề của bạn bây giờ là cần một quy ước đặt tên class cho không bị trùng cũng như là dễ nhớ dễ hiểu. Bạn có thể tham khảo tại đây: https://viblo.asia/p/tiet-kiem-thoi-gian-voi-quy-uoc-dat-ten-css-maGK78PMZj2
0
Thay vì bạn viết trực tiếp css vào file thì bạn tách file css riêng rồi import vào component. Ví dụ bạn viết css có tên file about.css thì bạn import vào component about.js luôn k import vào file app.js nữa
Nhưng mà lát nữa thì component about.js mình cũng phải import vào App để quản lý điều hướng các kiểu chứ ạ?
Bình luận này đã bị xóa
0
Bạn có thể dùng Sass hoặc Scss để viết tránh việc trùng css. Hoặc sử dụng thư viện http://tailwindcss.com để viết cho nhanh nhé https://viblo.asia/p/viet-style-sach-cho-front-end-nhu-the-nao-E375zd72ZGW
Thanks pac 
