Bộ chọn thẻ 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à 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 + '">';

import styles from "./style.css";
// import { className } from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

import styles from "./style.css";
// import { className } from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

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 + '">';

import styles from "./style.css";
// import { className } from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

import styles from "./style.css";
// import { className } from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

Tương tự,

import styles from "./style.css";
// import { className } from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

import styles from "./style.css";
// import { className } from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

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;
}

Thí dụ.

.className {
  color: green;
  background: red;
}

.otherClassName {
  composes: className;
  color: yellow;
}

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;
}

.className {
  color: green;
  background: red;
}

.otherClassName {
  composes: className;
  color: yellow;
}

Có thể soạn nhiều lớp với

.className {
  color: green;
  background: red;
}

.otherClassName {
  composes: className;
  color: yellow;
}

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

Bộ chọn thẻ CSS là gì?

Làm cách nào để viết bộ chọn CSS trong Selenium?

Làm cách nào để sử dụng bộ chọn phần tử trong CSS?

Làm cách nào để sử dụng bộ chọn id trong CSS?