Nếu bạn còn khá mới với CSS, bạn có thể đã hoặc chưa gặp phải sự cố nghiêm trọng xảy ra khi kiểu của ứng dụng mở rộng— vì các quy tắc CSS tuân theo phạm vi toàn cầu, hai hoặc nhiều lớp cùng tên sẽ xung đột. Xử lý nhiều biểu định kiểu và theo dõi các quy ước đặt tên trong các tệp CSS có thể trở nên nặng nề và nếu bạn không đủ cẩn thận, bạn có thể gặp phải một số xung đột từ các tên lớp giống hệt nhau
Mô-đun CSS có thể giải quyết các lỗi có khả năng xuất hiện này, đặc biệt là khi ứng dụng của bạn phát triển. Cuối cùng, chúng cho phép chúng tôi sử dụng cùng một tên lớp trong nhiều tệp mà không có lỗi bộ chọn và quy tắc bằng cách xác định phạm vi tên lớp cục bộ theo mặc định
Mô-đun CSS đơn giản là một tệp .css
, trong đó các lớp hoạt động tương tự như các biến cục bộ trong Javascript. Nó là một công cụ làm cho mỗi lớp trở nên độc nhất bằng cách bao gồm một hàm băm trong tên của chúng
Tạo một mô-đun CSS
Nếu bạn đang sử dụng create-react-app
, việc tạo Mô-đun CSS cho một thành phần tương đối dễ dàng. Thực hiện theo quy ước đặt tên điển hình cho tệp css, nhưng hãy chèn module
trước .css
, như vậy. [name].module.css
Để xem một ví dụ, đây là tệp Task.module.css
của tôi trong một ứng dụng công việc đơn giản
Một Mô-đun CSS đi vào trình biên dịch và CSS xuất hiện ở phía bên kia
Bạn lấy trình biên dịch Mô-đun CSS ở đâu? . Chỉ cần thêm tùy chọn "?modules" vào "css-loader". Ví dụ, xem. github. com/css-modules/webpack-demo
Nếu điều đó quá trừu tượng đối với bạn, hãy lấy một ví dụ cụ thể
Lưu ý cách lớp create-react-app
1 được đổi tên thành create-react-app
2. Hãy phá vỡ điều đó
create-react-app
3. tên tập tincreate-react-app
1. tên lớp cục bộcreate-react-app
5. một hàm băm ngẫu nhiên
Những thứ này kết hợp để tạo ra create-react-app
2 duy nhất trên toàn cầu. Điều này rất quan trọng vì trình duyệt của bạn không có khái niệm về 'phạm vi cục bộ' cho CSS. Nếu các quy tắc CSS không phải là duy nhất trên toàn cầu, thì chúng sẽ trùng nhau
Cho đến nay rất tốt, nhưng làm cách nào để bạn có được cái tên duy nhất trên toàn cầu đó?
Mô-đun CSS thực sự có một đầu ra khác mà trước đây tôi đã giấu bạn. Một đối tượng JavaScript với tất cả các lớp đã đổi tên của bạn
Đây là ví dụ cụ thể được cập nhật
Lưu ý rằng đối tượng JavaScript có khóa create-react-app
1 và khớp với tên lớp mà bạn đã chọn trong Mô-đun CSS của mình. .css
0 sẽ cung cấp cho bạn lớp được đổi tên
Để sử dụng Mô-đun CSS với React, bạn sẽ thêm CSS vào trang web của mình và nhập đối tượng JavaScript vào thành phần của bạn. Hãy thêm nó vào sơ đồ
Phần kết luận
Đối với các dự án lớn, cách tiếp cận này thực sự hiệu quả
Niềm vui thực sự khi làm việc với các Mô-đun CSS là đây
Bất cứ khi nào tôi bắt đầu một thành phần mới, tôi biết rằng không có phong cách toàn cầu nào có thể cản trở công việc của tôi
Vẫn còn bối rối? . Tôi sẽ giới thiệu cho bạn một danh sách các tình huống phổ biến nhất mà bạn sẽ gặp phải với Mô-đun CSS và tôi sẽ chỉ cho bạn chính xác cách trình biên dịch Mô-đun CSS sẽ hoạt động trong từng trường hợp
Nhân tiện, tôi đã mất nhiều ngày để tìm ra Mô-đun CSS là gì và chúng hoạt động như thế nào. Hãy để tôi giúp bạn học mọi thứ nhanh hơn