Xuất mô-đun css

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à

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

2. Sau đó, một lớp CSS từ đối tượng đó được tham chiếu trong thuộc tính JSX

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

3 với

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

4, thuộc tính này hiển thị thành HTML với các tên lớp CSS động như

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

5

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 CSS liên tục

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

3 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 hơn để có thể truy cập

Đây là một ví dụ trong đó tên lớp

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

7 đượ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 thành phần HTML có tên lớp là

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

8 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

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

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 = () => {
      <p className={colors.forest}>
        In the forest
      </p>
    }

    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 = () => {
      <p className={colors.forest}>
        In the forest
      </p>
    }

    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 = () => {
      <p className={colors.forest}>
        In the forest
      </p>
    }

    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 của 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 , Bố, Chồng, kỹ sư phần mềm giao diện người dùng, nhà thiết kế UX, nghệ sĩ pixel nghiệp dư, người mày mò và bậc thầy về nghệ thuật phức tạp. Bạn nên theo dõi anh ấy trên Twitter nơi anh ấy chia sẻ những thứ hữu ích. (và cũng buồn cười nữa). Jaime González GarcíaTheo dõi @vintharas

---

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?

Làm cách nào để nhập CSS mô-đun?

Để nhập Mô-đun CSS vào thành phần tương ứng, hãy nhập biểu định kiểu của mô-đun css dưới dạng kiểu hoặc [name]Kiểu . Trong JSX, hãy sử dụng lớp CSS được xác định làm chỗ dựa className như vậy. Từ đây, bạn có thể thêm bao nhiêu mô-đun CSS khác mà bạn muốn, chỉ cần nhớ nhập từng mô-đun dưới dạng một tên khác.

Mô-đun CSS là gì?

Mô-đun CSS là tệp CSS trong đó tất cả tên lớp và tên hoạt ả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.

Mô-đun CSS trong React là gì?

24 tháng 10 năm 2021. Mô-đun CSS là " tệp CSS trong đó tất cả tên lớp và tên hoạt ảnh được đặt trong phạm vi cục bộ theo mặc định ". Thay vì có các tệp và lớp CSS tĩnh, Mô-đun CSS tạo triển khai động nằm trong phạm vi cục bộ cho HTML với sự trợ giúp của Webpack hoặc Browserify.

Các mô-đun CSS có phải là một thư viện không?

Mô-đun CSS là thư viện kiểu dáng có phạm vi CSS cho thành phần. Điều đó cho phép bạn viết các kiểu thành phần di động mà không xung đột với các kiểu hoặc tên bộ chọn khác.