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
- Phần CSS1. Tên tệp là style1. css
CSS
>
4>
5>
6
6
html
50_______9_______51_______19_______4>
1>
6
html
56_______19_______4>
1>
6
html
60
- đầu ra. Sử dụng kiểu1. css mà không cần nhập style2. tập tin css.
- CSS Phần 2. Tên tệp là style2. css
html
html
61
html
63
html
65
html
66
- đầu ra. Sau khi sử dụng cả hai tệp CSS [style1 và style2]
Ghi chú. Có hai cách khác nhau để nhập một tệp CSS vào một tệp khác bằng cách sử dụng @import url[“style2. css”]; . css”; . css”; . @nhập url[“style2. css”]; trong phần đầu
CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này