Các mô-đun CSS là gì?

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-app1 được đổi tên thành create-react-app2. Hãy phá vỡ điều đó

• create-react-app3. tên tập tin
• create-react-app1. tên lớp cục bộ
• create-react-app5. một hàm băm ngẫu nhiên

Những thứ này kết hợp để tạo ra create-react-app2 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-app1 và khớp với tên lớp mà bạn đã chọn trong Mô-đun CSS của mình. .css0 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

Các mô-đun CSS trong React là gì?

Các mô-đun CSS có thực hành tốt không?

Làm cách nào để thêm các mô-đun CSS?