Memahami Metodologi Modul CSS

Modul CSS: alat yang berkuasa untuk CSS yang dikomponen

Artikel ini akan memperkenalkan modul CSS, cara yang berkesan untuk menyelesaikan konflik ruang nama global CSS dan memudahkan penamaan komponen. Ia memerlukan proses konfigurasi dan pembinaan tertentu, biasanya digunakan sebagai plug-in untuk webpack atau imbas, dan tidak berjalan secara bebas.

Kelebihan teras:

Skop tempatan:

modul CSS mengehadkan skop CSS ke komponen secara lalai untuk mengelakkan konflik penamaan global.
• Penamaan dinamik:
Proses pembinaan akan menghasilkan nama kelas dinamik yang unik, memetakannya dengan gaya yang sama, mengurangkan konflik penamaan, dan meningkatkan modulariti.
• Skalabilitas:
Menyokong mendefinisikan kelas global dan memperluaskan gaya dari modul lain untuk meningkatkan kebolehgunaan semula kod dan kebolehkerjaan.
Prinsip kerja:

modul CSS dilaksanakan dengan mengimport fail CSS dalam modul JavaScript seperti komponen React. Ia mewujudkan objek yang memetakan nama kelas yang ditakrifkan dalam fail CSS untuk nama kelas yang dihasilkan secara dinamik dan unik. Nama kelas ini digunakan sebagai rentetan dalam JavaScript.

Sebagai contoh, fail CSS mudah:

Penggunaan dalam komponen JavaScript:

<code class="language-css">.base {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;
}</code>

Webpack boleh menjana selepas penyusunan:

<code class="language-javascript">import styles from './styles.css';

element.innerHTML = `<div class="${styles.base}">CSS Modules真有趣！</div>`;</code>

Generasi nama kelas boleh dikonfigurasikan, tetapi kunci ialah mereka dihasilkan secara dinamik, unik, dan peta kepada gaya yang betul.

<code class="language-html"><div class="_20WEds96_Ee1ra54-24ePy">CSS Modules真有趣！</div></code>

<code class="language-css">._20WEds96_Ee1ra54-24ePy {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;
}</code>

Soalan yang sering ditanya:

Nama Kelas

Nama Kelas:

Nama kelas bukan demi estetika, tetapi untuk penggunaan gaya, jadi ini bukan masalah.
• Kesukaran dalam debugging: Anda boleh menggunakan peta sumber untuk debugging. Kerana skop gaya jelas, debugging agak mudah.
• modul kebolehgunaan gaya yang lemah: modul CSS direka untuk mengelakkan konflik gaya global, tetapi mereka masih boleh mengembangkan gaya dengan menentukan kelas global atau
kata kunci untuk meningkatkan kebolehgunaan semula.
• :global() composes
Bergantung pada alat binaan:

Ini serupa dengan SASS atau POSTCSS, di mana langkah -langkah binaan diperlukan.

<code class="language-css">:global(.clearfix::after) {
  content: '';
  clear: both;
  display: table;
}

.base {
  composes: appearance from '../AnotherModule/styles.css';
}</code>

• pemula:

Alat bangunan seperti Webpack atau Browserify diperlukan.

Konfigurasi Webpack:

tambah ke

:

Untuk menghasilkan fail CSS yang berasingan, anda boleh menggunakan

: webpack.config.js

<code class="language-javascript">{
  test: /\.css$/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { modules: true } }
  ]
}</code>

Konfigurasi BROWSERIFY (Contoh): MiniCssExtractPlugin

tambah skrip npm dalam

<code class="language-javascript">const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ... other configurations
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { modules: true } }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
};</code>

:

Ringkasan:

package.json

Modul CSS menyediakan kaedah penulisan CSS yang mampan, modular, baik dan boleh diguna semula, terutamanya untuk projek besar.

<code class="language-json">{
  "scripts": {
    "build": "browserify -p [ css-modulesify -o dist/main.css ] -o dist/index.js src/index.js"
  }
}</code>

FAQ:

• Kelebihan: Elakkan konflik nama kelas, meningkatkan kebolehgunaan semula komponen dan kebolehpercayaan, dan kombinasi gaya sokongan.
• Pelaksanaan: Konfigurasi Webpack atau Browserify, gunakan lanjutan .module.css.
• Gaya Global: Gunakan :global().
• Gabungan gaya: Gunakan kata kunci composes.
• serasi dengan keserasian React: .
• Perbezaan dari CSS tradisional: Skop yang berbeza adalah berbeza, CSS tradisional di seluruh dunia, modul CSS secara tempatan.
• serasi dengan sass/kurang: , yang memerlukan konfigurasi tambahan.
• Debug: Gunakan peta sumber.
• Batasan: Membina alat diperlukan, konfigurasi tambahan mungkin diperlukan untuk menyokong pertanyaan media, dll.
• Rendering sisi pelayan: Konfigurasi tambahan diperlukan.

Atas ialah kandungan terperinci Memahami Metodologi Modul CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!