CSS Modules: Gaya Terlingkup
Batasi nama kelas secara otomatis secara lokal untuk setiap komponen menggunakan CSS Modules dalam pengaturan pembangunan Anda.
CSS Modules: Gaya Terlingkup adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 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 CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Apa itu CSS Modules?
CSS Modules secara otomatis membatasi cakupan nama kelas CSS ke berkas komponen tempat nama tersebut didefinisikan. Setiap nama kelas diubah menjadi pengenal unik saat waktu build—sehingga mencegah kebocoran gaya global.
Konvensi Berkas
Beri nama berkas CSS Anda dengan .module.css (atau .module.scss untuk Sass):
/* Button.module.css */
.button {
background: royalblue;
color: white;
padding: 10px 20px;
border-radius: 4px;
}Mengimpor CSS Modules
Impor modul sebagai objek JavaScript. Nama kelas menjadi properti:
import styles from './Button.module.css';
function Button({ children }) {
return <button className={styles.button}>{children}</button>;
}
// Renders as: class="Button_button__aB2cD" (unique hash)Kelas yang Dikomposisikan
Gunakan composes untuk memperluas kelas dari modul lain:
/* Button.module.css */
.primary {
composes: base from "./Base.module.css";
background: royalblue;
}Kelas Global
Gunakan :global() untuk mengecualikan kelas tertentu dari pembatasan cakupan lokal:
/* styles.module.css */
.container :global(.third-party-class) {
/* targets third-party className without scoping */
color: red;
}CSS Modules di Vite
Vite memiliki dukungan bawaan untuk CSS Modules. Berkas yang cocok dengan *.module.css akan diproses secara otomatis:
// vite.config.js
export default {
css: {
modules: {
localsConvention: 'camelCase' // .my-class → styles.myClass
}
}
}CSS Modules di webpack
Aktifkan modul dalam konfigurasi css-loader:
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}
}Komposisi Nama Kelas
Gabungkan beberapa kelas modul menggunakan literal templat atau pustaka clsx/classnames:
import styles from './Card.module.css';
import clsx from 'clsx';
function Card({ featured }) {
return (
<div className={clsx(styles.card, featured && styles.featured)}>
Content
</div>
);
}Tanpa Biaya Waktu Jalan
CSS Modules sepenuhnya diselesaikan saat waktu build—tidak ada beban JavaScript saat waktu jalan. Hasilnya adalah CSS standar dengan nama kelas yang diubah. Hal ini menjadikannya ideal untuk aplikasi yang sensitif terhadap kinerja.
Dukungan TypeScript
Hasilkan definisi tipe TypeScript untuk CSS Modules menggunakan typed-css-modules atau konfigurasi cssModuleTypes Vite agar akses nama kelas aman terhadap tipe.
CSS Modules vs CSS-in-JS
Perbandingan CSS Modules:
- Hanya saat waktu build—tanpa biaya JS saat waktu jalan
- Terintegrasi dengan CSS/Sass standar—sintaks yang sudah dikenal
- Tidak mendukung gaya dinamis melalui interpolasi JS
- Kurang fleksibel untuk gaya dinamis berbasis tema dibandingkan styled-components/Emotion
Pemeriksaan Singkat
Bagaimana CSS Module mencegah bentrokan nama kelas antara dua berkas komponen yang berbeda?
Rangkuman
CSS Modules secara otomatis membatasi cakupan nama kelas dengan mengubahnya menjadi pengenal unik saat waktu build. Impor CSS Modules sebagai objek JavaScript dan akses kelas sebagai properti. Gunakan :global() untuk mengecualikan pemilih global dari pembatasan cakupan dan composes untuk komposisi kelas. Tanpa biaya waktu jalan serta dengan dukungan penuh untuk sintaks CSS/Sass, CSS Modules menjadi alternatif ringan untuk CSS-in-JS pada gaya statis.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “CSS Modules: Gaya Terlingkup” gratis?
Ya — teks lengkap “CSS Modules: Gaya Terlingkup” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “CSS Modules: Gaya Terlingkup”?
Batasi nama kelas secara otomatis secara lokal untuk setiap komponen menggunakan CSS Modules dalam pengaturan pembangunan Anda. Kamu berlatih CSS 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 CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS 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 3 dari 4.
Berapa lama pelajaran “CSS Modules: Gaya Terlingkup” 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 CSS Academy ini?
Ya. Setiap pelajaran CSS 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
- Styled-components: Literal Templat Bertanda
- Emotion: css() dan styled()
- CSS Modules: Gaya Terlingkup
- Vanilla Extract: CSS-in-JS Tanpa Waktu Jalan