Modul CSS: Nama Class Berscope
Aktifkan Modul CSS dalam proyek Vite atau webpack untuk otomatis membatasi scope nama class ke file komponen dan menghilangkan kebocoran style global.
Modul CSS: Nama Class Berscope adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu CSS Modules
CSS Modules mengubah nama kelas saat proses build untuk menyertakan hash unik, sehingga nama tersebut tercakup dalam berkas komponen. Kelas bernama .card menjadi .card_a1b2c3 — mustahil bertabrakan secara tidak sengaja dengan gaya komponen lain.
Cara Kerja CSS Modules
Impor berkas CSS sebagai objek. Gunakan properti objek tersebut sebagai nama kelas. Pengemas (Vite, webpack) menangani transformasinya.
// Button.module.css
.button {
background: #6366f1;
color: white;
padding: 8px 16px;
}
.button--large {
padding: 12px 24px;
}
// Button.tsx
import styles from './Button.module.css';
function Button({ large }: { large?: boolean }) {
return (
<button className={`${styles.button} ${large ? styles['button--large'] : ''}`}>
Click me
</button>
);
}Nama Kelas Dinamis dengan clsx
Pustaka clsx menyederhanakan komposisi nama kelas bersyarat dengan CSS Modules.
import clsx from 'clsx';
import styles from './Button.module.css';
function Button({ variant, disabled }: ButtonProps) {
return (
<button className={clsx(
styles.button,
styles[`button--${variant}`],
disabled && styles['button--disabled']
)}>
...
</button>
);
}CSS Global dalam CSS Modules
Gunakan :global untuk mendeklarasikan kelas yang TIDAK boleh tercakup. Berguna untuk menimpa kelas pustaka pihak ketiga.
/* Scoped: */
.container { padding: 16px; }
/* Global (not scoped): */
:global(.react-datepicker) {
font-family: inherit;
}Komposisi — Memperluas Kelas
CSS Modules mendukung composes untuk mewarisi gaya dari kelas lain, termasuk dari modul lain.
/* utilities.module.css */
.flexRow {
display: flex;
align-items: center;
gap: 8px;
}
/* Button.module.css */
.button {
composes: flexRow from './utilities.module.css';
background: #6366f1;
}CSS Modules vs Gaya Tercakup (Vue)
Gaya tercakup Vue dan CSS Modules sama-sama mencegah kebocoran global, tetapi berbeda: gaya tercakup menambahkan atribut data; CSS Modules mengubah nama kelas. Keduanya valid — CSS Modules juga berfungsi di React.
CSS Modules dalam Vite
Vite mendukung CSS Modules secara bawaan untuk berkas yang diakhiri dengan .module.css. Tidak diperlukan konfigurasi tambahan.
TypeScript untuk CSS Modules
Pasang typescript-plugin-css-modules atau buat berkas .d.ts untuk CSS Modules dengan alat typed-css-modules agar mendapatkan pelengkapan otomatis untuk nama kelas.
Konvensi Penamaan dalam CSS Modules
Karena nama kelas menjadi properti JavaScript, gunakan camelCase untuk nama kelas dalam CSS Modules: .buttonPrimary, bukan .button-primary (tanda hubung memerlukan akses menggunakan tanda kurung siku).
Kapan Menggunakan CSS Modules
CSS Modules sangat baik untuk aplikasi React ketika diperlukan gaya yang tercakup pada komponen, tetapi solusi CSS-in-JS lengkap akan berlebihan. Vite + CSS Modules adalah solusi penataan ringan tanpa waktu proses.
CSS Modules vs CSS-in-JS
CSS Modules: tanpa waktu proses, CSS biasa, performa lebih baik. CSS-in-JS (styled-components): gaya dinamis saat waktu proses, mengutamakan JS. Untuk sebagian besar aplikasi, CSS Modules lebih sederhana dan cepat.
Pemeriksaan Singkat
Apa yang terjadi pada nama kelas CSS ketika Anda menggunakan CSS Modules?
Ringkasan: CSS Modules
Impor berkas .module.css sebagai objek. Nama kelas otomatis tercakup dengan hash unik. Gunakan :global() untuk gaya global yang disengaja. Gunakan composes untuk pewarisan antar-modul. Gunakan clsx untuk nama kelas bersyarat. Vite mendukung CSS Modules secara bawaan. Tanpa beban waktu proses dibandingkan CSS-in-JS.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Modul CSS: Nama Class Berscope” gratis?
Ya — teks lengkap “Modul CSS: Nama Class Berscope” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Modul CSS: Nama Class Berscope”?
Aktifkan Modul CSS dalam proyek Vite atau webpack untuk otomatis membatasi scope nama class ke file komponen dan menghilangkan kebocoran style global. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Modul CSS: Nama Class Berscope” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Metodologi BEM: Block, Element, Modifier
- Modul CSS: Nama Class Berscope
- CSS-in-JS: Styled-components dan Emotion
- Pendekatan Utility-First Tailwind CSS