Mô-đun css @value

Question

Các mô-đun CSS là một khung CSS cho phép bạn viết các lớp CSS và hoạt ảnh có phạm vi cục bộ theo mặc định và do đó tránh được các vấn đề do phạm vi toàn cầu gây ra trong CSS

Nội dung chính Show

Tại sao chúng ta cần các mô-đun CSS?
Tính năng mô-đun CSS
Thành phần
theo chủ đề
Phong cách toàn cầu trong các mô-đun CSS
Sử dụng các mô-đun CSS
Tài nguyên
đã đánh dấu với

Mỗi mô-đun CSS là một tệp CSS thông thường xác định một số kiểu bằng cách sử dụng các lớp CSS

/* colors.css */
.forest {
  color: green;
}

Khi viết một ứng dụng web, người ta sử dụng các mô-đun CSS này từ tệp JavaScript

import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';

Điều này hoàn toàn phù hợp trong các ứng dụng React tập trung vào thành phần và đương nhiên là JS/JSX

import colors from "./colors.css";
// import { forest } from "./colors.css";

export theForest = () => {
  <p className={colors.forest}>
    In the forest
  </p>
}

Một bước xây dựng biến đổi tên của lớp và đảm bảo rằng nó là duy nhất trên ứng dụng web của bạn

<p class="colors__forest__32fds12">
In the forest
p>

Kết quả là người ta có thể viết các lớp CSS như thể chúng nằm trong phạm vi cục bộ và không quan tâm đến khả năng ghi đè các kiểu CSS hoặc các hậu quả không mong muốn khác

Tại sao chúng ta cần các mô-đun CSS?

CSS có một loạt các nguyên tắc thiết kế (phạm vi toàn cầu và tầng) có một số vấn đề cơ bản trong các ứng dụng web lớn. Khi các ứng dụng phát triển thì số lượng CSS cần thiết để tạo kiểu cho một ứng dụng web cũng tăng theo, theo thời gian, việc duy trì ngày càng khó khăn hơn vì các thay đổi CSS cho một tính năng mới có thể gây ra những hậu quả không mong muốn. Theo thời gian, cộng đồng phát triển web đã đưa ra các kỹ thuật và quy ước để mở rộng CSS như OOCSS, BEM hoặc SMACSS, trong số những thứ khác tập trung vào việc tạo CSS dựa trên thành phần (gắn với một phần của DOM, một thành phần). Tất cả những điều trên đều dựa trên các quy ước đặt tên dài dòng và khó thực thi một cách nhất quán

Các mô-đun CSS là một cách tiếp cận khác nhằm giải quyết các hạn chế CSS này và được thiết kế có lưu ý đến các kiểu dựa trên thành phần

Chúng có phạm vi cục bộ (vì vậy chúng đảm bảo không có vấn đề gì với xung đột hoặc ghi đè kiểu)
- không chắc chắn về thành phần nào bị ảnh hưởng khi thay đổi một số CSS
- không chắc chắn về việc liệu một số CSS có được sử dụng hay không
- vì CSS được xác định trong một mô-đun chỉ được sử dụng trong một phạm vi nhỏ nên chúng tôi có thể sử dụng các tên CSS ngắn và tận dụng ngữ cảnh do chính tệp mô-đun CSS cung cấp. e. g.
```
import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';
```
 9 không còn cần thiết để ngăn xung đột giữa các thành phần giống như cảnh báo vì chúng tôi đã ở trong mô-đun
```
import colors from "./colors.css";
// import { forest } from "./colors.css";

export theForest = () => {
 
 In the forest
 
}
```
 0 với phạm vi cục bộ, chúng tôi có thể dựa vào lớp CSS
```
import colors from "./colors.css";
// import { forest } from "./colors.css";

export theForest = () => {
 
 In the forest
 
}
```
 1 làm tên
Các phụ thuộc xác định rõ ràng. Vì vậy, bạn có thể nhanh chóng xem kiểu nào được áp dụng cho một thành phần hoặc mẫu nhất định
Chúng cung cấp một cơ chế tổng hợp cho phép
- phong cách tái sử dụng
- xác định ngôn ngữ ngữ nghĩa cấp cao hơn mà chúng ta có thể dựa vào để thúc đẩy tính nhất quán và tái sử dụng các kiểu trong một ứng dụng. e. g. thay vì mọi người xác định các kiểu phông chữ cụ thể bằng các quy tắc CSS cơ bản, chúng ta có thể
```
import colors from "./colors.css";
// import { forest } from "./colors.css";

export theForest = () => {
 
 In the forest
 
}
```
 2 để tất cả các thành phần có phông chữ lớn sử dụng chính xác các quy tắc CSS giống nhau

“Mô-đun CSS tại sao chúng ta cần chúng?” . chào mừng đến với tương lai” thậm chí còn đi sâu hơn khi so sánh các mô-đun CSS với BEM và SASS

Video này “Trường hợp của các mô-đun CSS” mô tả toàn bộ hành trình đến các mô-đun CSS theo lời của người đồng sáng tạo Mark Dangleish

Tính năng mô-đun CSS

Phạm vi cục bộ theo mặc định. CSS trong các mô-đun CSS có phạm vi cục bộ. Điều này đạt được vì các mô-đun CSS là một dạng CSS-in-JS sử dụng bước xây dựng để tạo các lớp được xác định duy nhất
Thành phần. Các lớp CSS trong các mô-đun CSS có thể được cấu tạo để tăng tính tái sử dụng và tính mô-đun
giá trị. Các giá trị có thể được xác định trong các mô-đun CSS và được xuất theo cách tương tự với các biến LESS và SASS

Cửa thoát hiểm phạm vi toàn cầu. Bạn có thể tham khảo các lớp CSS trong phạm vi toàn cầu bằng cách sử dụng

import colors from "./colors.css";
// import { forest } from "./colors.css";

export theForest = () => {
  <p className={colors.forest}>
    In the forest
  </p>
}

3

theo chủ đề. Các mô-đun CSS có thể được sử dụng để tạo chủ đề bằng cách yêu cầu một thành phần lấy một tập hợp các kiểu (chủ đề) thông qua chỗ dựa thay vì nhập mô-đun CSS từ chính thành phần đó

Thành phần

Các mô-đun CSS hỗ trợ bố cục kiểu thông qua việc sử dụng từ khóa

import colors from "./colors.css";
// import { forest } from "./colors.css";

export theForest = () => {
  <p className={colors.forest}>
    In the forest
  </p>
}

4. Để có một phong cách sáng tác với một phong cách khác, bạn sử dụng

import colors from "./colors.css";
// import { forest } from "./colors.css";

export theForest = () => {
  <p className={colors.forest}>
    In the forest
  </p>
}

4 như vậy

import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';

1

Sau đó, chúng tôi có thể áp dụng các lớp

import colors from "./colors.css";
// import { forest } from "./colors.css";

export theForest = () => {
  <p className={colors.forest}>
    In the forest
  </p>
}

6 và

import colors from "./colors.css";
// import { forest } from "./colors.css";

export theForest = () => {
  <p className={colors.forest}>
    In the forest
  </p>
}

7 trong các thành phần JavaScript của chúng tôi

import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';

4

Do thành phần mô-đun CSS, thành phần được tạo bao gồm cả lớp

import colors from "./colors.css";
// import { forest } from "./colors.css";

export theForest = () => {
  <p className={colors.forest}>
    In the forest
  </p>
}

6 và

import colors from "./colors.css";
// import { forest } from "./colors.css";

export theForest = () => {
  <p className={colors.forest}>
    In the forest
  </p>
}

7

import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';

7

Cũng có thể soạn các lớp từ các mô-đun CSS khác. Điều này cho phép khả năng viết một loạt các kiểu cấp cao phổ biến có thể được sử dụng lại trong ứng dụng của bạn để có tính nhất quán và tái sử dụng cao hơn

import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';

8

giá trị

Các mô-đun CSS hỗ trợ các giá trị theo cách tương tự như các biến LESS và SASS

import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';

9

import colors from "./colors.css";
// import { forest } from "./colors.css";

export theForest = () => {
  <p className={colors.forest}>
    In the forest
  </p>
}

0

Các giá trị không nhất thiết phải là các thuộc tính CSS đơn lẻ. Ví dụ: đây cũng là những giá trị hợp lệ

import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';

0

import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';

1

theo chủ đề

Cách tự nhiên để làm việc với các mô-đun CSS là một thiết kế các thành phần độc lập với các kiểu được xác định phạm vi và chứa trong chính thành phần đó. Điều này mang lại cho chúng tôi tất cả những lợi ích mà chúng tôi đã mô tả ở trên về tính đơn giản và khả năng bảo trì. Có một trường hợp hợp lý khi tạo kiểu cho một thành phần từ bên ngoài và đó là theo chủ đề, tôi. e. khả năng có một thành phần có thể có nhiều phong cách hoặc chủ đề. Các mô-đun CSS thực sự giỏi trong việc này bởi vì vào cuối ngày, chúng là một tập hợp các lớp và quy tắc có thể được chuyển đến một thành phần thông qua các đạo cụ khiến nó thực sự phù hợp để tạo chủ đề trong các ứng dụng React

import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';

2

import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';

3

import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';

4

import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';

5

Phong cách toàn cầu trong các mô-đun CSS

Để tạo kiểu toàn cầu trong các mô-đun CSS, hãy sử dụng công tắc

import colors from "./colors.css";
// import { forest } from "./colors.css";

export theForest = () => {
  <p className={colors.forest}>
    In the forest
  </p>
}

3

import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';

6

Để tham khảo các kiểu toàn cầu trong các mô-đun CSS, hãy sử dụng

import colors from "./colors.css";
// import { forest } from "./colors.css";

export theForest = () => {
  <p className={colors.forest}>
    In the forest
  </p>
}

3 như vậy

import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';

7

Để sử dụng tên lớp toàn cầu khi soạn kiểu

import colors from "./colors.css";
// import { forest } from "./colors.css";

element.innerHTML = 'In the forest
';

8

Sử dụng các mô-đun CSS

Tất cả các dự án dựa trên React bên dưới đều có hỗ trợ tích hợp cho các mô-đun CSS

Các mô-đun CSS trong Tiếp theo. js
Các mô-đun CSS trong Tạo ứng dụng React
Các mô-đun CSS trong Gatsby

Nếu bạn sử dụng khung React khác, bạn có thể kích hoạt các mô-đun CSS bằng cách dựa vào Webpack và định cấu hình trình tải css để sử dụng các mô-đun CSS. Để hiển thị phía máy chủ, bạn có thể dựa vào PostCSS và plugin postcss-modules

Hướng dẫn bắt đầu từ tài liệu mô-đun CSS cung cấp hướng dẫn bổ sung để kích hoạt các mô-đun CSS trong các chuỗi công cụ khác nhau

Tài nguyên

Để biết thêm thông tin về các mô-đun CSS, hãy tham khảo tài liệu mô-đun CSS. Để có một cuộc thảo luận thực sự thú vị về những lợi ích của việc sử dụng các mô-đun CSS với nhiều trường hợp sử dụng thú vị, hãy so sánh với BEM và SASS và viết các mô-đun CSS ngữ nghĩa dựa trên thành phần đọc các mô-đun CSS. chào mừng đến với tương lai bởi Gled Maddern

Sau đó, bạn có thể tìm hiểu sâu hơn bằng cách đọc các tài nguyên bổ sung này

Các tài liệu mô-đun CSS khác
Bài viết gốc trình bày các mô-đun CSS của Mark Dangleish
- Chặn, Phần tử, Sửa đổi các thành phần JavaScript của bạn
- Sự kết thúc của CSS toàn cầu
Bài viết
- Các mô-đun CSS là gì và tại sao chúng ta cần chúng?
- Bắt đầu với các mô-đun CSS
- Mô-đun CSS và React
- Chào mừng các mô-đun CSS đến với tương lai
- Các kiểu trong phạm vi thành phần với các mô-đun CSS
- mô-đun CSS. tại sao đây là cải tiến quan trọng nhất đối với css trong nhiều năm
- Chia sẻ các biến giữa CSS và JavaScript
nói chuyện
- Phản ứng. CSS trong JS của bạn
- Trường hợp cho các mô-đun CSS

Thông báo. Chia sẻ bài viết này

Được viết bởi Jaime González García , cha, chồng, kỹ sư phần mềm, nhà thiết kế ux, nghệ sĩ điểm ảnh nghiệp dư, thợ mày mò và bậc thầy về nghệ thuật phức tạp. Bạn cũng có thể tìm thấy anh ấy trên Twitter lảm nhảm về những thứ ngẫu nhiên. Jaime González García

wop. Muốn tiếp cận?

Nếu bạn có bất kỳ câu hỏi hoặc nhận xét nào về bài viết, hãy liên hệ trên twitterverse. Tin nhắn trực tiếp của tôi luôn mở và tôi luôn sẵn lòng trợ giúp và trả lời các câu hỏi

đã đánh dấu với

css css-mô-đun web dev giao diện người dùng

Bạn có muốn nhận thêm các bài viết như thế này về lập trình, phát triển web, JavaScript, Angular, năng suất của nhà phát triển, công cụ, UX và thậm chí cả nội dung độc quyền như phiên bản miễn phí của sách của tôi trong hộp thư của bạn không?

programming css

Mô-đun css @value

Tại sao chúng ta cần các mô-đun CSS?

Tính năng mô-đun CSS

Thành phần

giá trị

theo chủ đề

Phong cách toàn cầu trong các mô-đun CSS

Sử dụng các mô-đun CSS

Tài nguyên

wop. Muốn tiếp cận?

đã đánh dấu với

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội