apa itu modul css

Modul CSS ialah fail CSS di mana semua nama kelas hanya mempunyai skop setempat, iaitu, skop semua nama kelas dan nama animasi dalam fail CSS secara lalai kepada skop semasa. Modul CSS mengehadkan skop kepada komponen, dengan itu mengelakkan masalah skop global.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3, komputer Dell G3.

Modul CSS ialah:

Fail CSS di mana semua nama kelas dan nama animasi diskop secara setempat secara lalai Skop semua nama kelas dan nama animasi lalai kepada skop semasa.

Modul CSS ialah fail CSS di mana semua nama kelas mempunyai skop setempat.

Jadi modul CSS bukanlah spesifikasi rasmi atau pelaksanaan dalam penyemak imbas, tetapi kaedah (dengan bantuan Webpack atau Browserify) yang menukar skop nama kelas dan pemilih kepada fail semasa (sesuatu seperti ruang nama).

Apakah rupa ini dan mengapa? Kita akan lihat sebentar lagi. Pertama, ingat cara HTML dan CSS berfungsi secara umum. Nama kelas digunakan pada HTML:

Tentukan kelas ini dalam CSS:

<h1 id="An-nbsp-example-nbsp-heading">An example heading</h1>

Setelah CSS ini digunakan pada dokumen HTML ini, gunakan h1 kelas ini Warna latar belakang akan tukar jadi merah. Kami tidak perlu berurusan dengan CSS atau HTML. Pelayar memahami format fail ini.

.title {  
    background-color: red;  
}

Modul CSS mengambil pendekatan yang berbeza. Tidak seperti menulis HTML biasa, kami perlu menulis markup kami dalam fail JavaScript, seperti index.js. Contoh berikut menunjukkan kepada kita cara ia akan berfungsi (kami akan menggunakan contoh yang lebih praktikal kemudian):

Semasa proses binaan kami, pengkompil akan melihat fail styles.css yang kami import, Kemudian semak kami JavaScript fail dan gunakan kelas .title melalui styles.title. Proses binaan kami kemudiannya akan memproses ini menjadi fail HTML dan CSS baharu yang berasingan, menggantikan atribut Kelas HTML dan kelas pemilih CSS dengan rentetan baharu.

import styles from  "./styles.css"; 
element.innerHTML = 
    `<h1 class="${styles.title}"> 
        An example heading 
    </h1>`;

Fail HTML yang dijana mungkin kelihatan seperti ini:

Fail CSS yang dijana mungkin kelihatan seperti ini:

<h1 class="_styles__title_309571057">
    An example heading 
</h1>

Atribut kelas dan pemilih .title sebelumnya telah Ia telah hilang sepenuhnya dan digantikan dengan rentetan yang baru sepenuhnya. CSS kami sebelum ini tidak lagi diberikan kepada penyemak imbas sama sekali.

._styles__title_309571057 { 
    background-color: red; 
}

Mengapa kita perlu menggunakan modul CSS?

Gunakan modul CSS, yang akan memastikan semua gaya digunakan pada satu komponen:

di satu tempat
hanya terpakai pada komponen itu dan tiada yang lain
Selain itu, mana-mana komponen boleh mempunyai kebergantungan sebenar, seperti

import buttons from "./buttons.css";
import padding from "./padding.css";

element.innerHTML = `<div class="${buttons.red}  ${padding.large}">`;

Tujuan ini pendekatan adalah untuk menyelesaikan masalah skop global dalam CSS

Pernahkah anda cuba menulis CSS ringkas secepat mungkin tanpa memikirkannya dalam keadaan kekurangan masa dan sumber Apakah kesannya? ada pada orang lain?

Pernahkah anda mempunyai beberapa bit buruk rawak yang ditinggalkan di bahagian bawah helaian gaya anda dan cuba menyusunnya tetapi tidak pernah teratur?

Pernahkah anda menjumpai gaya yang anda tidak pasti sama ada gaya itu dilakukan atau sama ada gaya itu digunakan?

Pernahkah anda menganggap bahawa anda boleh mengalih keluar beberapa gaya tanpa melanggar yang lain? Tertanya-tanya sama ada gaya ini bergantung pada anda atau bergantung pada orang lain? Atau mengatasi gaya di tempat lain?

Soalan-soalan ini mungkin membuatkan anda sakit kepala, tarikh akhir projek yang dilanjutkan dan rasa sedih dan rindu melihat ke luar tingkap.

Menggunakan modul CSS dan konsep skop semasa lalai, masalah ini akan dielakkan. Apabila anda menulis gaya, anda perlu memikirkan hasil akhir gaya tersebut.

Sebagai contoh, jika anda menggunakan kelas rawak-kasar dalam HTML tanpa menggunakannya sebagai kelas gaya modul CSS, gaya tidak akan digunakan kerana pemilih CSS akan ditukar kepada ._style_random -gross-class_0038089.

(Mempelajari perkongsian video:

tutorial video css

)

Atas ialah kandungan terperinci apa itu modul css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!