Bỏ qua lớp css

Các mô-đun CSS phản ứng thực hiện ánh xạ tự động các mô-đun CSS. Mỗi lớp CSS được gán một mã định danh phạm vi cục bộ với một tên duy nhất toàn cầu. Mô-đun CSS cho phép CSS mô-đun và có thể tái sử dụng

⚠️⚠️⚠️THÔNG BÁO NGỪNG SỬ DỤNG⚠️⚠️⚠️

Nếu bạn đang cân nhắc sử dụng

<div className='global-css' styleName='local-module'></div>

4, hãy đánh giá xem

<div className='global-css' styleName='local-module'></div>

5 có bao gồm trường hợp sử dụng của bạn không.

<div className='global-css' styleName='local-module'></div>

5 là một thay thế nhẹ của

<div className='global-css' styleName='local-module'></div>

4

<div className='global-css' styleName='local-module'></div>

5 không phải là sự thay thế tạm thời và không bao gồm tất cả các trường hợp sử dụng của

<div className='global-css' styleName='local-module'></div>

4. Tuy nhiên, nó có chi phí hoạt động nhỏ hơn nhiều (0-10% so với +50%; xem Hiệu suất) và dấu chân kích thước nhỏ hơn nhiều (dưới 2kb so với +17kb)

Nó rất dễ dàng để bắt đầu. Xem bản demo https. //github. com/gajus/babel-plugin-react-css-modules/tree/master/demo

• Mô-đun CSS
  • gói web

    {
        test: /\.css$/,
        loaders: [
            'style-loader?sourceMap',
            'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
        ]
    }

    0
• Vấn đề là gì?
• Việc thực hiện
• Cách sử dụng
  • Gói mô-đun
    • gói web
      • Phát triển
      • Sản lượng
    • trình duyệt
  • Mở rộng các kiểu thành phần

  • {
        test: /\.css$/,
        loaders: [
            'style-loader?sourceMap',
            'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
        ]
    }

    1 Tài sản
  • Vòng lặp và các thành phần con
  • Người trang trí
  • Tùy chọn

    • {
          test: /\.css$/,
          loaders: [
              'style-loader?sourceMap',
              'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
          ]
      }

      2

    • {
          test: /\.css$/,
          loaders: [
              'style-loader?sourceMap',
              'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
          ]
      }

      3
• SASS, SCSS, LESS và các Bộ tiền xử lý CSS khác
  • Bật bản đồ nguồn
• thành phần lớp
  • Thành Phần Lớp Học Giải Quyết Những Vấn Đề Gì?
  • Thành phần lớp sử dụng bộ tiền xử lý CSS
• CSS toàn cầu
• Nhiều mô-đun CSS

Mô-đun CSS

Mô-đun CSS thật tuyệt vời. Nếu bạn không quen thuộc với Mô-đun CSS, thì đó là khái niệm sử dụng gói mô-đun chẳng hạn như webpack để tải CSS trong phạm vi một tài liệu cụ thể. Trình tải mô-đun CSS sẽ tạo một tên duy nhất cho mỗi lớp CSS tại thời điểm tải tài liệu CSS (chính xác là CSS có thể tương tác). Để xem các Mô-đun CSS trong thực tế, webpack-demo

Trong ngữ cảnh của React, các Mô-đun CSS trông như thế này

<div className='global-css' styleName='local-module'></div>

0

Kết xuất thành phần sẽ tạo ra một đánh dấu tương tự như

<div className='global-css' styleName='local-module'></div>

1

và một tệp CSS tương ứng khớp với các lớp CSS đó

Thật tuyệt vời

gói web { test: /\.css$/, loaders: [ 'style-loader?sourceMap', 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ] }0

Mô-đun CSS là một đặc điểm kỹ thuật có thể được triển khai theo nhiều cách.

<div className='global-css' styleName='local-module'></div>

4 tận dụng trình tải css webpack triển khai Mô-đun CSS hiện có

Vấn đề là gì?

bản thân webpack css-loader có một số nhược điểm

• Bạn phải sử dụng tên lớp CSS

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  6
• Bạn phải sử dụng đối tượng

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  1 bất cứ khi nào xây dựng một

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  8
• Trộn các Mô-đun CSS và các lớp CSS toàn cầu rất cồng kềnh
• Tham chiếu đến Mô-đun CSS không xác định sẽ phân giải thành

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  9 mà không có cảnh báo

Thành phần Mô-đun CSS React tự động tải các Mô-đun CSS bằng cách sử dụng thuộc tính

<div className='global-css' styleName='local-module'></div>

80, e. g

<div className='global-css' styleName='local-module'></div>

9

Sử dụng

<div className='global-css' styleName='local-module'></div>

4

• Bạn không bắt buộc phải sử dụng quy ước đặt tên

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  6
• Bạn không cần tham khảo đối tượng

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  1 mỗi khi sử dụng Mô-đun CSS
• Có sự phân biệt rõ ràng giữa CSS toàn cầu và Mô-đun CSS, e. g

<div className='global-css' styleName='local-module'></div>

• Bạn được cảnh báo khi

  <div className='global-css' styleName='local-module'></div>

  80 đề cập đến một Mô-đun CSS không xác định (tùy chọn

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  3)
• Bạn có thể bắt buộc sử dụng một mô-đun CSS duy nhất cho mỗi

  <div className='global-css' styleName='local-module'></div>

  86 (tùy chọn

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  2)

Việc thực hiện

<div className='global-css' styleName='local-module'></div>

4 mở rộng phương thức

<div className='global-css' styleName='local-module'></div>

89 của thành phần đích. Nó sẽ sử dụng giá trị của

<div className='global-css' styleName='local-module'></div>

80 để tìm các Mô-đun CSS trong đối tượng kiểu được liên kết và sẽ nối các tên lớp CSS duy nhất phù hợp với giá trị thuộc tính

<div className='global-css' styleName='local-module'></div>

86

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

8

Thật tuyệt vời

Cách sử dụng

thiết lập bao gồm

• Thiết lập gói mô-đun để tải CSS có thể tương tác
• Trang trí thành phần của bạn bằng cách sử dụng

  <div className='global-css' styleName='local-module'></div>

  4

Gói mô-đun

gói web

Phát triển

Trong môi trường phát triển, bạn muốn Bật Sourcemaps và webpack Hot Module Replace (HMR).

<div className='global-css' styleName='local-module'></div>

44 đã hỗ trợ HMR. Do đó, Thay thế mô-đun nóng sẽ hoạt động ngay lập tức

Cài đặt

• Cài đặt

  <div className='global-css' styleName='local-module'></div>

  44
• Cài đặt

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  0
• Thiết lập trình tải

  <div className='global-css' styleName='local-module'></div>

  47

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

Sản lượng

Trong môi trường sản xuất, bạn muốn trích xuất các đoạn CSS thành một tệp biểu định kiểu duy nhất

Thuận lợi

• Ít thẻ kiểu hơn (IE cũ hơn có giới hạn)
• CSS SourceMap (với

  <div className='global-css' styleName='local-module'></div>

  48 và

  <div className='global-css' styleName='local-module'></div>

  49)
• CSS được yêu cầu song song
• Bộ đệm CSS riêng biệt
• Thời gian chạy nhanh hơn (ít mã và thao tác DOM hơn)

Hãy cẩn thận

• Yêu cầu HTTP bổ sung
• Thời gian biên dịch lâu hơn
• Cấu hình phức tạp hơn
• Không sửa đổi đường dẫn công cộng thời gian chạy
• Không thay thế mô-đun nóng

– extract-text-webpack-plugin

Cài đặt

• Cài đặt

  <div className='global-css' styleName='local-module'></div>

  44

• Cài đặt

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  0

• Sử dụng

  <div className='global-css' styleName='local-module'></div>

  32 để trích xuất các đoạn CSS thành một biểu định kiểu duy nhất

• Thiết lập trình tải

  <div className='global-css' styleName='local-module'></div>

  47

  • ExtractTextPlugin v1x

    <div className='global-css' styleName='local-module'></div>

    8

  • ExtractTextPlugin v2x

    <div className='global-css' styleName='local-module'></div>

    4

• Cài đặt plugin

  <div className='global-css' styleName='local-module'></div>

  32

  • ExtractTextPlugin v1x

    <div className='global-css' styleName='local-module'></div>

    3

  • ExtractTextPlugin v2x

    <div className='global-css' styleName='local-module'></div>

    9

Tham khảo webpack-demo hoặc Reac-css-modules-examples để biết ví dụ về thiết lập hoàn chỉnh

trình duyệt

Tham khảo

<div className='global-css' styleName='local-module'></div>

35

Mở rộng các kiểu thành phần

Sử dụng thuộc tính

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

1 để ghi đè lên các kiểu thành phần mặc định

Giải thích sử dụng thành phần

<div className='global-css' styleName='local-module'></div>

37

<div className='global-css' styleName='local-module'></div>

9

Trong ví dụ này,

<div className='global-css' styleName='local-module'></div>

38 được sử dụng để trang trí thành phần

<div className='global-css' styleName='local-module'></div>

37 bằng Mô-đun CSS

<div className='global-css' styleName='local-module'></div>

90. Khi thành phần

<div className='global-css' styleName='local-module'></div>

37 được hiển thị, nó sẽ sử dụng các thuộc tính của đối tượng

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

1 để xây dựng các giá trị

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

8

Sử dụng thuộc tính

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

1, bạn có thể ghi đè lên đối tượng thành phần mặc định

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

1, e. g

<div className='global-css' styleName='local-module'></div>

10

CSS có thể tương tác có thể mở rộng ICSS khác. Sử dụng tính năng này để mở rộng các kiểu mặc định, e. g

<div className='global-css' styleName='local-module'></div>

11

Trong ví dụ này,

<div className='global-css' styleName='local-module'></div>

96 mở rộng có chọn lọc

<div className='global-css' styleName='local-module'></div>

97 (kiểu mặc định của thành phần

<div className='global-css' styleName='local-module'></div>

37)

Tham khảo ví dụ

<div className='global-css' styleName='local-module'></div>

99 để biết ví dụ về triển khai đang hoạt động

{ test: /\.css$/, loaders: [ 'style-loader?sourceMap', 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ] }1 Tài sản

Các thành phần được trang trí kế thừa thuộc tính

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

1 mô tả ánh xạ giữa các mô-đun CSS và các lớp CSS

<div className='global-css' styleName='local-module'></div>

12

Trong ví dụ trên,

<div className='global-css' styleName='local-module'></div>

92 và

<div className='global-css' styleName='local-module'></div>

93 là tương đương

Thuộc tính

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

1 được thiết kế để cho phép trang trí thành phần của Vòng lặp và Thành phần con

Vòng lặp và các thành phần con

Không thể sử dụng

<div className='global-css' styleName='local-module'></div>

80 để xác định kiểu của một

<div className='global-css' styleName='local-module'></div>

86 sẽ được tạo bởi một thành phần khác, e. g

<div className='global-css' styleName='local-module'></div>

13

Ví dụ trên sẽ không hoạt động.

<div className='global-css' styleName='local-module'></div>

38 được sử dụng để trang trí thành phần

<div className='global-css' styleName='local-module'></div>

98. Tuy nhiên, chính thành phần

<div className='global-css' styleName='local-module'></div>

99 sẽ hiển thị

<div className='global-css' styleName='local-module'></div>

100

Vì mục đích đó, thành phần được trang trí kế thừa thuộc tính

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

1 mà bạn có thể sử dụng như một đối tượng Mô-đun CSS thông thường. Do đó, ví dụ trước đó có thể được viết lại thành

<div className='global-css' styleName='local-module'></div>

14

Bạn có thể sử dụng thuộc tính

<div className='global-css' styleName='local-module'></div>

80 trong thành phần con nếu bạn trang trí thành phần con bằng cách sử dụng

<div className='global-css' styleName='local-module'></div>

38 trước khi chuyển nó tới thành phần hiển thị, e. g

<div className='global-css' styleName='local-module'></div>

15

Người trang trí

<div className='global-css' styleName='local-module'></div>

16

Bạn cần trang trí thành phần của mình bằng cách sử dụng

<div className='global-css' styleName='local-module'></div>

4, e. g

<div className='global-css' styleName='local-module'></div>

9

Đó là nó

Đúng như tên gọi,

<div className='global-css' styleName='local-module'></div>

4 tương thích với cú pháp của trình trang trí ES7

<div className='global-css' styleName='local-module'></div>

18

Thật tuyệt vời

Tham khảo kho lưu trữ ví dụ về mô-đun phản ứng css để biết ví dụ về thiết lập webpack

Tùy chọn

Các tùy chọn được cung cấp dưới dạng tham số thứ ba cho hàm

<div className='global-css' styleName='local-module'></div>

38

<div className='global-css' styleName='local-module'></div>

19

hoặc như một tham số thứ hai cho trình trang trí

<div className='global-css' styleName='local-module'></div>

90

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

2

Mặc định.

<div className='global-css' styleName='local-module'></div>

108

Cho phép nhiều tên Mô-đun CSS

Khi

<div className='global-css' styleName='local-module'></div>

108, điều sau đây sẽ gây ra lỗi

<div className='global-css' styleName='local-module'></div>

91

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

3

Mặc định.

<div className='global-css' styleName='local-module'></div>

111

Xác định hành động mong muốn khi không thể ánh xạ

<div className='global-css' styleName='local-module'></div>

80 tới Mô-đun CSS hiện có

Tùy chọn có sẵn

• <div className='global-css' styleName='local-module'></div>

  111 đưa ra lỗi

• <div className='global-css' styleName='local-module'></div>

  114 ghi cảnh báo bằng cách sử dụng

  <div className='global-css' styleName='local-module'></div>

  115

• <div className='global-css' styleName='local-module'></div>

  116 âm thầm bỏ qua tên phong cách còn thiếu

SASS, SCSS, LESS và các Bộ tiền xử lý CSS khác

CSS có thể tương tác tương thích với bộ tiền xử lý CSS. Để sử dụng bộ tiền xử lý, tất cả những gì bạn cần làm là thêm bộ tiền xử lý vào chuỗi trình tải, e. g. trong trường hợp webpack, đơn giản như cài đặt

<div className='global-css' styleName='local-module'></div>

117 và thêm

<div className='global-css' styleName='local-module'></div>

118 vào cuối truy vấn trình tải

<div className='global-css' styleName='local-module'></div>

44 (trình tải được xử lý từ phải sang trái)

<div className='global-css' styleName='local-module'></div>

92

Bật bản đồ nguồn

Để bật CSS Source maps, hãy thêm tham số

<div className='global-css' styleName='local-module'></div>

120 vào css-loader và vào

<div className='global-css' styleName='local-module'></div>

117

<div className='global-css' styleName='local-module'></div>

93

thành phần lớp

Mô-đun CSS thúc đẩy mẫu sáng tác, tôi. e. mọi Mô-đun CSS được sử dụng trong một thành phần phải xác định tất cả các thuộc tính cần thiết để mô tả một thành phần, chẳng hạn như. g

<div className='global-css' styleName='local-module'></div>

94

Thành phần thúc đẩy phân tách đánh dấu và kiểu tốt hơn bằng cách sử dụng ngữ nghĩa khó đạt được nếu không có Mô-đun CSS

Vì tên Mô-đun CSS là cục bộ nên bạn hoàn toàn có thể sử dụng các tên kiểu chung như "trống" hoặc "đầy đủ", không có tiền tố "hộp-"

Để tìm hiểu thêm về cách soạn các quy tắc CSS, tôi khuyên bạn nên đọc bài viết của Glen Maddern về Mô-đun CSS và thông số chính thức của Mô-đun CSS

Thành Phần Lớp Học Giải Quyết Những Vấn Đề Gì?

Xem xét ví dụ tương tự trong CSS và HTML

<div className='global-css' styleName='local-module'></div>

95

<div className='global-css' styleName='local-module'></div>

96

Mô hình này nổi lên với sự ra đời của OOCSS. Nhược điểm lớn nhất của việc triển khai này là bạn sẽ cần thay đổi HTML hầu như mỗi khi bạn muốn thay đổi kiểu

Thành phần lớp sử dụng bộ tiền xử lý CSS

Phần này của tài liệu được đưa vào như một bài tập học tập để mở rộng sự hiểu biết về nguồn gốc của Thành Phần Lớp. Mô-đun CSS hỗ trợ một phương pháp soạn thảo Mô-đun CSS riêng bằng cách sử dụng từ khóa

<div className='global-css' styleName='local-module'></div>

122. Bộ tiền xử lý CSS không bắt buộc

Bạn có thể viết các tác phẩm trong SCSS bằng cách sử dụng từ khóa

<div className='global-css' styleName='local-module'></div>

123 và sử dụng Chỉ thị Mixin, e. g

Sử dụng

<div className='global-css' styleName='local-module'></div>

123

<div className='global-css' styleName='local-module'></div>

97

Điều này có nghĩa là

<div className='global-css' styleName='local-module'></div>

98

sử dụng mixin

<div className='global-css' styleName='local-module'></div>

99

Điều này có nghĩa là

<div className='global-css' styleName='local-module'></div>

0

CSS toàn cầu

Mô-đun CSS không hạn chế bạn sử dụng CSS toàn cầu

<div className='global-css' styleName='local-module'></div>

1

Tuy nhiên, hãy thận trọng khi sử dụng CSS toàn cầu. Với Mô-đun CSS, chỉ có một số trường hợp sử dụng hợp lệ cho CSS toàn cầu (e. g. bình thường hóa)

Nhiều mô-đun CSS

Tránh sử dụng nhiều Mô-đun CSS để mô tả một phần tử. Đọc về Thành Phần Lớp Học

Điều đó nói rằng, nếu bạn yêu cầu sử dụng nhiều Mô-đun CSS để mô tả một phần tử, hãy bật tùy chọn

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

2. Khi nhiều Mô-đun CSS được sử dụng để mô tả một phần tử,

<div className='global-css' styleName='local-module'></div>

4 sẽ nối thêm một tên lớp duy nhất cho mọi Mô-đun CSS mà nó khớp trong khai báo

<div className='global-css' styleName='local-module'></div>

80, e. g