Mari kita bincangkan mengapa CSS perlu dimodulasi? Bagaimana untuk melaksanakan modularisasi?

gaya css “separa”

sass, kurang melalui @import, menyelesaikan sebahagian masalah modulariti css.

Memandangkan css bersifat global, jika fail yang diimport mempunyai nama yang sama dengan fail semasa, gaya sebelumnya akan ditimpa oleh yang terakhir.
Apabila memperkenalkan beberapa komponen biasa atau apabila berbilang orang bekerjasama untuk membangunkan halaman yang sama, anda perlu mempertimbangkan sama ada gaya itu akan ditimpa, yang sangat menyusahkan.

// file A
.name {
    color: red
}

// file B
@import "A.scss";
.name {
    color: green
}

Ciri-ciri gaya global css menjadikan css sukar untuk dikekalkan, jadi penyelesaian kepada gaya "tempatan" css diperlukan.
Iaitu, modularisasi css lengkap @import Modul css yang masuk perlu menyembunyikan skop dalamannya sendiri.

Prinsip Modul CSS

Dengan meletakkan nilai cincang unik selepas setiap nama kelas, tiada masalah konflik penamaan global. Ini bersamaan dengan memalsukan gaya "tempatan".

// 原始样式 styles.css
.title {
  color: red;
}

// 原始模板 demo.html
import styles from 'styles.css';

<h1 class={styles.title}>
  Hello World
</h1>


// 编译后的 styles.css
.title_3zyde {
  color: red;
}

// 编译后的 demo.html
<h1 class="title_3zyde">
  Hello World
</h1>

Webpack dan Modul CSS

komponen css-loader webpack sendiri disertakan dengan Modul CSS, yang boleh digunakan melalui konfigurasi mudah.

{
    test: /\.css$/,
    loader: "css?modules&localIdentName=[name]__[local]--[hash:base64:5]"
}

Konvensyen penamaan dilanjutkan daripada BEM.

• Blok: nama modul yang sepadan[name]

• Elemen: nama nod yang sepadan[local]

• Pengubah suai: Status nod yang sepadan [hash:base64:5]

menggunakan __ dan -- untuk membezakan nod pecahan perkataan dalam blok.
Kelas akhir dinamakan styles__title--3zyde.

Digunakan dalam persekitaran pengeluaran

Dalam pengeluaran sebenar, ia akan menjadi lebih mudah untuk menggunakannya dalam kombinasi dengan sass. Berikut ialah fail konfigurasi untuk webpack yang digunakan dengan sass.

{
    test: /\.scss$/,
    loader: "style!css?modules&importLoaders=1&localIdentName=[name]__[local]--[hash:base64:5]!sass?sourceMap=true&sourceMapContents=true"
}

Biasanya selain gaya tempatan, gaya global juga diperlukan, seperti fail asas seperti base.css.
Letakkan fail gaya awam dan fail gaya komponen ke dalam dua sasaran berbeza. seperti berikut.

.
├── app                      
│   ├── styles               # 公用样式
│   │     ├── app.scss       
│   │     └── base.scss      
│   │
│   └── components           # 组件
          ├── Component.jsx  # 组件模板
          └── Component.scss # 组件样式

Kemudian gunakan konfigurasi webpack untuk "menyetempatkan" (kecualikan) fail scss di luar folder app/styles.

{
    test: /\.scss$/,
    exclude: path.resolve(__dirname, 'app/styles'),
    loader: "style!css?modules&importLoaders=1&localIdentName=[name]__[local]--[hash:base64:5]!sass?sourceMap=true&sourceMapContents=true"
},
{
    test: /\.scss$/,
    include: path.resolve(__dirname, 'app/styles'),
    loader: "style!css?sass?sourceMap=true&sourceMapContents=true"
}

Kadangkala, elemen mempunyai berbilang nama kelas Anda boleh menambah berbilang nama kelas pada elemen melalui join(" ") atau templat rentetan.

// join-react.jsx
<h1 className={[styles.title,styles.bold].join(" ")}>
  Hello World
</h1>

// stringTemp-react.jsx
<h1 className={`${styles.title} ${styles.bold}`}>
  Hello World
</h1>

Jika gaya boleh ditakrifkan dengan menulis hanya satu kelas, maka sebaiknya tulis semua gaya dalam satu kelas.
Jadi, jika kita menggunakan berbilang kelas untuk menentukan gaya, kita biasanya mempunyai beberapa pertimbangan yang logik. Ia akan menjadi lebih menyusahkan untuk menulis pada masa ini.

Pengenalan nama kelas boleh menyelesaikan masalah menulis berbilang nama kelas untuk elemen dan masalah menulis pertimbangan logik yang menyusahkan.

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

Memperkenalkan modul gaya Modul CSS, ia juga sangat menyusahkan untuk menulis styles.xxx untuk setiap kelas setiap kali Dalam "Timbunan Teknologi Tindak Balas Mendalam", pustaka react-css-modules disebut kurangkan kod Penulisan, pelajar yang berminat boleh mempelajarinya.

Pembelajaran yang disyorkan: "tutorial video css"