CSS trong phạm vi thành phần cho phép bạn viết CSS di động, truyền thống với các tác dụng phụ tối thiểu. không còn lo lắng về xung đột tên bộ chọn hoặc ảnh hưởng đến kiểu dáng của các thành phần khác
Gatsby hoạt động vượt trội với Mô-đun CSS, một giải pháp phổ biến để viết CSS có phạm vi thành phần. Đây là một trang web ví dụ sử dụng Mô-đun CSS
Mô-đun CSS là gì?
Trích dẫn từ trang chủ Mô-đun CSS
Mô-đun CSS là một tệp CSS trong đó tất cả các tên lớp và tên hoạt hình được đặt trong phạm vi cục bộ theo mặc định
Mô-đun CSS cho phép bạn viết kiểu trong tệp CSS nhưng sử dụng chúng dưới dạng đối tượng JavaScript để xử lý bổ sung và đảm bảo an toàn. Các Mô-đun CSS rất phổ biến vì chúng tự động tạo tên lớp và hoạt hình duy nhất, do đó bạn không phải lo lắng về xung đột tên bộ chọn
Ví dụ về mô-đun CSS
CSS trong mô-đun CSS không khác CSS bình thường, nhưng phần mở rộng của tệp khác để đánh dấu rằng tệp sẽ được xử lý
Trong ví dụ này, một mô-đun CSS được nhập và khai báo là một đối tượng JavaScript có tên là containerStyles. Sau đó, một lớp CSS từ đối tượng đó được tham chiếu trong thuộc tính JSX className với containerStyles.container, thuộc tính này hiển thị thành HTML với các tên lớp CSS động như container-module--container--3MbgH
Kích hoạt biểu định kiểu người dùng với tên lớp ổn định
Việc thêm một mã CSS liên tục className vào đánh dấu JSX của bạn cùng với mã Mô-đun CSS của bạn có thể giúp người dùng dễ dàng tận dụng Biểu định kiểu người dùng để truy cập
Đây là một ví dụ trong đó tên lớp container được thêm vào DOM cùng với tên lớp được tạo động của mô-đun
Sau đó, người dùng trang web có thể viết các kiểu CSS của riêng họ phù hợp với các phần tử HTML có tên lớp là .container và nó sẽ không bị ảnh hưởng nếu tên hoặc đường dẫn mô-đun CSS thay đổi
Khi nào nên sử dụng Mô-đun CSS
Các Mô-đun CSS rất được khuyến khích cho những người mới xây dựng với Gatsby (và React nói chung) vì chúng cho phép bạn viết các tệp CSS di động, thông thường trong khi đạt được các lợi ích về hiệu suất như chỉ gói mã tham chiếu
Mô-đun CSS là một tệp CSS trong đó tất cả các tên lớp và tên hoạt hình được đặt trong phạm vi cục bộ theo mặc định. Tất cả các URL (_______35_______) và @imports đều ở định dạng yêu cầu mô-đun (./xxx và ../xxx có nghĩa là tương đối, import styles from "./style.css"; // import { className } from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">';0 và import styles from "./style.css"; // import { className } from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">';1 có nghĩa là trong thư mục mô-đun, i. e. trong import styles from "./style.css"; // import { className } from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">';2)
Các mô-đun CSS biên dịch thành định dạng trao đổi cấp thấp được gọi là ICSS hoặc CSS có thể tương tác, nhưng được viết giống như các tệp CSS thông thường
/* style.css */ .className { color: green; }
Khi nhập Mô-đun CSS từ Mô-đun JS, nó sẽ xuất một đối tượng có tất cả các ánh xạ từ tên cục bộ sang tên toàn cầu
import styles from "./style.css"; // import { className } from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">';
đặt tên
Đối với tên lớp cục bộ, nên đặt tên camelCase, nhưng không bắt buộc
Điều này được khuyến nghị vì giải pháp thay thế phổ biến, kebab-casing có thể gây ra hành vi không mong muốn khi cố gắng truy cập kiểu. tên lớp dưới dạng ký hiệu dấu chấm. Bạn vẫn có thể xử lý kebab-case với ký hiệu dấu ngoặc (ví dụ:. import styles from "./style.css"; // import { className } from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">';3) nhưng import styles from "./style.css"; // import { className } from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">';4 sạch hơn
ngoại lệ
import styles from "./style.css"; // import { className } from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">';5 chuyển sang phạm vi toàn cầu cho mã định danh tương ứng của bộ chọn hiện tại. import styles from "./style.css"; // import { className } from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">';6 tương ứng import styles from "./style.css"; // import { className } from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">';7 khai báo nội dung trong ngoặc đơn trong phạm vi toàn cục
Tương tự, import styles from "./style.css"; // import { className } from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">';8 và import styles from "./style.css"; // import { className } from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">';9 cho phạm vi cục bộ
Nếu bộ chọn được chuyển sang chế độ toàn cầu, thì chế độ toàn cầu cũng được kích hoạt cho các quy tắc. (Điều này cho phép chúng tôi tạo .className { color: green; background: red; } .otherClassName { composes: className; color: yellow; }0 cục bộ. )
Thí dụ. .className { color: green; background: red; } .otherClassName { composes: className; color: yellow; }1
Thành phần
Có thể soạn bộ chọn
.className { color: green; background: red; } .otherClassName { composes: className; color: yellow; }
Có thể có nhiều quy tắc .className { color: green; background: red; } .otherClassName { composes: className; color: yellow; }2, nhưng quy tắc .className { color: green; background: red; } .otherClassName { composes: className; color: yellow; }2 phải ở trước các quy tắc khác. Việc mở rộng chỉ hoạt động đối với các bộ chọn phạm vi cục bộ và chỉ khi bộ chọn là một tên lớp duy nhất. Khi một tên lớp kết hợp một tên lớp khác, Mô-đun CSS sẽ xuất cả hai tên lớp cho lớp cục bộ. Điều này có thể thêm tối đa nhiều tên lớp
Có thể soạn nhiều lớp với .className { color: green; background: red; } .otherClassName { composes: className; color: yellow; }4
phụ thuộc
Soạn từ các tập tin khác
Có thể soạn tên lớp từ các Mô-đun CSS khác
.otherClassName { composes: className from "./style.css"; }
Lưu ý rằng khi soạn nhiều lớp từ các tệp khác nhau, thứ tự của công cụ không được xác định. Đảm bảo không xác định các giá trị khác nhau cho cùng một thuộc tính trong nhiều tên lớp từ các tệp khác nhau khi chúng được tạo thành trong một lớp
Lưu ý rằng việc soạn thảo không nên tạo thành một phụ thuộc vòng tròn. Mặt khác, không xác định được liệu thuộc tính của quy tắc có ghi đè thuộc tính của quy tắc được tổng hợp hay không. Hệ thống mô-đun có thể phát ra lỗi
Tốt nhất nếu các lớp làm một việc duy nhất và các phụ thuộc được phân cấp
Soạn từ tên lớp toàn cầu
Có thể soạn từ tên lớp toàn cầu
.otherClassName { composes: globalClassName from global; }
Sử dụng với tiền xử lý
Bộ tiền xử lý có thể giúp dễ dàng xác định khối toàn cầu hoặc cục bộ
i. e. với số ít. js
:global { .global-class-name { color: green; } }
Tại sao?
CSS mô-đun và có thể tái sử dụng
- Không còn xung đột
- phụ thuộc rõ ràng
- Không có phạm vi toàn cầu
ví dụ
- mô-đun css/webpack-demo
- outpunk/postcss-mô-đun-ví dụ
- theo chủ đề
- mô-đun css/browserify-demo
- x-team/bắt đầu-css-mô-đun
Lịch sử
- 04/2015. Tính năng .className { color: green; background: red; } .otherClassName { composes: className; color: yellow; }5 trong css-loader (webpack) cho phép các bộ chọn phạm vi cục bộ (sau này được đổi tên thành .className { color: green; background: red; } .otherClassName { composes: className; color: yellow; }6) bởi @sokra
- 05/2015. .className { color: green; background: red; } .otherClassName { composes: className; color: yellow; }7 cho phép .className { color: green; background: red; } .otherClassName { composes: className; color: yellow; }6 theo mặc định (xem bài đăng trên blog) của @markdalgleish
- 05/2015. Tính năng .className { color: green; background: red; } .otherClassName { composes: className; color: yellow; }9 trong css-loader cho phép soạn tên lớp cục bộ hoặc đã nhập bởi @sokra
- 05/2015. Tài liệu đặc tả Mô-đun CSS đầu tiên và tổ chức github với @sokra, @markdalgleish và @geelen
- 06/2015. .className { color: green; background: red; } .otherClassName { composes: className; color: yellow; }9 được đổi tên thành .className { color: green; background: red; } .otherClassName { composes: className; color: yellow; }2
- 06/2015. Chuyển đổi PostCSS để chuyển đổi Mô-đun CSS thành định dạng trung gian (ICSS)
- 06/2015. Chỉ định cho ICSS làm định dạng triển khai phổ biến cho nhiều hệ thống mô-đun bởi @geelen
- 06/2015. Triển khai cho jspm bởi @geelen và @guybedford
- 06/2015. Triển khai browserify bởi @joshwnj, @joshgillies và @markdalgleish
- 06/2015. triển khai css-loader của webpack được cập nhật lên thông số kỹ thuật mới nhất bởi @sokra
Triển khai
gói web
Trình tải css của Webpack ở chế độ mô-đun thay thế mọi mã định danh trong phạm vi cục bộ bằng một tên duy nhất toàn cầu (được băm từ tên mô-đun và mã định danh cục bộ theo mặc định) và xuất mã định danh đã sử dụng
Mở rộng thêm (các) tên lớp nguồn vào xuất
Mở rộng từ các mô-đun khác trước tiên nhập mô-đun khác và sau đó thêm (các) tên lớp vào xuất
Trang web phía máy chủ và tĩnh
PostCSS-Modules cho phép sử dụng các Mô-đun CSS cho các bản dựng tĩnh và phía máy chủ với Ruby, PHP hoặc bất kỳ ngôn ngữ hoặc khuôn khổ nào khác