cari

apa itu modul css

Jul 21, 2021 pm 03:27 PM

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.

apa itu modul css

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

apa itu modul css

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!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Sifat mesra seo React: Meningkatkan penglihatan enjin carianSifat mesra seo React: Meningkatkan penglihatan enjin carianApr 26, 2025 am 12:27 AM

Ya, reactapplicationscanbeseo-friendlywithpropstrategies.1) useserver-siderendering (ssr) withtoolslikenext.jstogeneratenerlhtmlforindexing.2) pelaksanaan stationsitationeration (ssg) forcontent-heavysitestopre-renderpageStoStoStoStoStoStoStoStoStoStoStoStoStoStoStoStoStoStoStoStoStoStoStetBuild

Kesesakan prestasi React: Mengenal pasti dan mengoptimumkan komponen perlahanKesesakan prestasi React: Mengenal pasti dan mengoptimumkan komponen perlahanApr 26, 2025 am 12:25 AM

Kesesakan prestasi bertindak balas terutamanya disebabkan oleh rendering yang tidak cekap, pengubahsuaian semula dan pengiraan komponen berat dalaman komponen. 1) Gunakan ReactDevTools untuk mencari komponen perlahan dan gunakan pengoptimuman reaksi. 2) Mengoptimumkan useeffect untuk memastikan bahawa ia hanya berjalan apabila perlu. 3) Gunakan usememo dan usecallback untuk pemprosesan memori. 4) Pecahkan komponen besar ke dalam komponen kecil. 5) Untuk senarai data besar, gunakan teknologi menatal maya untuk mengoptimumkan rendering. Melalui kaedah ini, prestasi aplikasi React dapat ditingkatkan dengan ketara.

Alternatif untuk bertindak balas: Meneroka perpustakaan dan kerangka UI JavaScript lainAlternatif untuk bertindak balas: Meneroka perpustakaan dan kerangka UI JavaScript lainApr 26, 2025 am 12:24 AM

Seseorang mungkin mencari alternatif untuk bertindak balas kerana masalah prestasi, lengkung pembelajaran, atau meneroka kaedah pembangunan UI yang berbeza. 1) Vue.js dipuji kerana kemudahan integrasi dan lengkung pembelajaran ringan, sesuai untuk aplikasi kecil dan besar. 2) Angular dibangunkan oleh Google dan sesuai untuk aplikasi besar, dengan sistem jenis yang kuat dan suntikan ketergantungan. 3) Svelte menyediakan prestasi dan kesederhanaan yang sangat baik dengan menyusunnya ke dalam JavaScript yang cekap pada masa membina, tetapi ekosistemnya masih berkembang. Apabila memilih alternatif, mereka harus ditentukan berdasarkan keperluan projek, pengalaman pasukan dan saiz projek.

Algoritma Rekonsiliasi Kekunci dan React: Meningkatkan PrestasiAlgoritma Rekonsiliasi Kekunci dan React: Meningkatkan PrestasiApr 26, 2025 am 12:21 AM

KekunciSinreacTarespecialTributSassignedtoElementSinarrayStableIdentity, crucialforthereconcililiatiationalgorithmwhichupdatesthedomefficiently.1)

Kod boilerplate yang diperlukan untuk projek reaksi: Mengurangkan overhead persediaanKod boilerplate yang diperlukan untuk projek reaksi: Mengurangkan overhead persediaanApr 26, 2025 am 12:19 AM

ToreduceSetupoverheadinreactprojects, usetoolslikecreatereactapp (CRA), next.js, gatsby, orstarterkits, andmaintainamodularstructur E.1) crasimplifiessetupwithasinglecommand.2) next.jsandgatsbyofforefeaturesbutalearningcurve.3) starterkitsprovideecomprehensi

Memahami UseState (): Panduan Komprehensif untuk Menegaskan Pengurusan NegeriMemahami UseState (): Panduan Komprehensif untuk Menegaskan Pengurusan NegeriApr 25, 2025 am 12:21 AM

useState () isareacthookusedtomanagestateinfunctionalcomponents.1) itinitializesandupdatesstate, 2) harusbecalledatthetoplevelofcomponents, 3) canleadto'stalestate'ifnotusedCorrecly, dan4)

Apakah kelebihan menggunakan React?Apakah kelebihan menggunakan React?Apr 25, 2025 am 12:16 AM

Reactispopularduetoitscomponent-berasaskan-berasaskan, virtualdom, richecosystem, anddeclarativenature.1) komponen-berasaskan komponen yang tidak dapat dipisahkan.

Debugging dalam React: Mengenal pasti dan menyelesaikan masalah biasaDebugging dalam React: Mengenal pasti dan menyelesaikan masalah biasaApr 25, 2025 am 12:09 AM

TODEBUGREACTAPPLICATIONSEFECTIVELY, USETHESESTRATION

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.