Tìm hiểu về CSS Modules (phần 1)

Nếu bạn muốn xác định một điểm bước ngoặt trong sự phát triển gần đây về tư duy CSS, có thể bạn muốn chọn Christopher Chedeau của "CSS trong JS" nói chuyện từ NationJS trong tháng Mười Một, năm 2014. Đó là một bước ngoặt mà thiết lập một loạt các suy nghĩ khác nhau theo hình xoắn ốc đi theo các hướng riêng của họ giống như các hạt sau một vụ va chạm năng lượng cao. Ví dụ, Phản ứng Phong cách , jsxstyle và Radium là ba trong số những phương pháp mới nhất, thông minh nhất, và khả thi nhất để tạo kiểu tóc trong Phản ứng và tất cả các tài liệu tham khảo nó trong dự án của họ Readme. Nếu sáng chế là một trường hợp khai thác các liền kề có thể , sau đó Christopher có trách nhiệm làm cho rất nhiều những gì có thể liền kề hơn.

Đây là tất cả các vấn đề hợp pháp có ảnh hưởng đến codebases CSS lớn nhất trong cách này hay cách khác. Christopher đã chỉ ra rằng tất cả những có giải pháp tốt nếu bạn di chuyển phong cách của bạn với JavaScript, đó là sự thật nhưng giới thiệu phức tạp và phong cách riêng của chính mình. Chỉ cần nhìn vào loạt các phương pháp để xử lý :hover bang giữa các dự án tôi tham khảo trước đó, một cái gì đó đã được giải quyết trong CSS cho một thời gian dài. Các đội CSS Modules cảm thấy chúng ta có thể tấn công các vấn đề đầu vào - giữ tất cả mọi thứ chúng tôi thích về CSS, và xây dựng dựa trên công việc tốt mà cộng đồng phong cách-trong-JS đã được sản xuất. Vì vậy, trong khi chúng tôi lạc quan về cách tiếp cận của chúng tôi và bảo vệ vững chắc các đức tính của CSS, chúng ta nợ một món nợ của lòng biết ơn đến những người folks đẩy ranh giới theo một hướng khác.

Bước 1. Mặc định style trong phạm vi local Trong Module CSS, mỗi tập tin được biên dịch riêng rẽ, do đó bạn có thể sử dụng bộ chọn lớp đơn giản với tên chung - bạn không cần phải lo lắng về việc gây rối loạn global scope. Hãy nói rằng chúng tôi đã xây dựng một đơn giản nút gửi với 4 trạng thái sau: normal, disable, error và in progress.

Trước khi dùng Modules CSS, chúng ta có thể style theo cách sau:

Với module CSS CSS Modules có nghĩa là bạn không bao giờ phải lo lắng về tên của bạn quá chung chung, chỉ cần sử dụng bất cứ điều gì làm cho ý nghĩa nhất:

Chú ý rằng chúng ta không sử dụng từ "nút" nằm ở đâu. Tại sao chúng ta? Các tập tin đã được gọi là "button.css trình-". Trong bất kỳ ngôn ngữ khác, bạn không có tiền tố tất cả các biến địa phương của bạn với tên của tập tin bạn đang làm việc trên - CSS nên có khác nhau. Điều đó có thể được thực hiện bởi cách CSS module được biên dịch - bằng cách sử dụng require hoặc import để tải các tập tin từ JavaScript:

Các classnames thực tế sẽ được tự động tạo ra và đảm bảo là duy nhất. CSS Modules sẽ chăm sóc của tất cả các điều đó cho bạn, và biên dịch các tập tin vào một định dạng được gọi ICSS ( đọc bài viết trên blog của tôi về điều đó ), đó là cách CSS và JS có thể giao tiếp. Vì vậy, khi bạn chạy ứng dụng của bạn, bạn sẽ thấy một cái gì đó như:

Quy ước đặt tên Xét ví dụ nút của chúng tôi một lần nữa:

Chú ý rằng tất cả các lớp học được độc lập, chứ không phải là một là "cơ sở" và phần còn lại là "đè". Trong Module CSS mỗi lớp nên có tất cả các phong cách cần thiết cho biến thể (nhiều hơn về cách mà các công trình trong một phút). Nó làm cho một sự khác biệt lớn đến cách bạn sử dụng những phong cách trong JavaScript:

Bước 2. Thành phần là tất cả mọi thứ Trước đó tôi đã đề cập rằng mỗi lớp nên chứa tất cả các phong cách cho các nút ở mỗi bang khác nhau, trái ngược với BEM nơi nó giả sử bạn muốn có nhiều hơn một:

Nhưng chờ đợi, làm thế nào để bạn đại diện kiểu được chia sẻ giữa tất cả các quốc gia? Câu trả lời có lẽ là CSS vũ khí mạnh nhất Modules ', thành phần:

Các composes từ khóa nói rằng .normal bao gồm tất cả các phong cách từ .common , giống như @extends từ khóa trong Sass. Nhưng trong khi Sass viết lại bộ chọn CSS của bạn để làm cho điều đó xảy ra, CSS Module thay đổi mà các lớp học được xuất khẩu sang JavaScript.

Trong Sass Hãy lấy ví dụ BEM của chúng tôi từ bên trên và áp dụng một số Sass '

sẽ được dịch ra css:

Sau đó bạn có thể chỉ cần sử dụng một lớp trong đánh dấu của bạn <button class="Button--error"> và nhận được những phong cách phổ biến và cụ thể mà bạn muốn. Đó là một khái niệm thật sự mạnh mẽ, nhưng việc thực hiện có một số trường hợp cạnh và những cạm bẫy mà bạn nên biết. Một bản tóm tắt tuyệt vời của những vấn đề và liên kết để đọc thêm là có sẵn ở đây , nhờ Hugo Giraudel. Với module CSS Các composes từ khóa là khái niệm tương tự như @extends nhưng hoạt động khác. Để chứng minh, chúng ta hãy xem xét một ví dụ:

Điều đó được biên soạn và sẽ trông như thế này vào thời điểm nó đạt đến trình duyệt:

Trong mã js, import styles từ file "./submit-button.css" cho kết quả:

Vì vậy, chúng tôi vẫn có thể chỉ cần sử dụng styles.normal hoặc styles.error trong mã của chúng tôi nhưng chúng tôi nhận được nhiều lớp kết xuất vào DOM.

Đây là sức mạnh của composes , bạn có thể kết hợp nhiều nhóm riêng biệt của phong cách mà không thay đổi đánh dấu của bạn hoặc viết lại bộ chọn CSS của bạn.

(Source: http://glenmaddern.com/articles/css-modules)