Vanilla Extract: CSS-in-JS Tanpa Waktu Jalan
Tuliskan CSS yang aman terhadap tipe dengan Vanilla Extract, yang menghasilkan berkas CSS statis saat pembangunan.
Vanilla Extract: CSS-in-JS Tanpa Waktu Jalan adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 Vanilla Extract?
Vanilla Extract adalah pustaka CSS-in-JS yang menghasilkan overhead waktu jalan nol. CSS didefinisikan dalam TypeScript dan dikompilasi menjadi berkas CSS statis saat waktu build—memberikan keamanan tipe tanpa penyisipan gaya saat waktu jalan.
Prinsip Utama
Tidak seperti styled-components atau Emotion, Vanilla Extract sepenuhnya berjalan saat waktu build. Impor JavaScript menjadi API untuk menulis gaya; hasilnya adalah berkas CSS biasa. Tidak ada JavaScript yang berjalan di klien untuk menerapkan gaya.
Konvensi Berkas
Berkas Vanilla Extract menggunakan ekstensi .css.ts:
// button.css.ts
import { style } from '@vanilla-extract/css';
export const button = style({
background: 'royalblue',
color: 'white',
padding: '10px 20px',
borderRadius: '4px',
cursor: 'pointer',
':hover': {
background: '#2563eb'
}
});Menggunakan dalam Komponen
Impor nama kelas yang diekspor lalu terapkan:
import { button } from './button.css.ts';
function Button({ children }) {
return <button className={button}>{children}</button>;
}Contract Tema
Fitur Vanilla Extract yang paling kuat: tentukan contract tema (struktur token), lalu buat beberapa tema yang mengimplementasikannya:
import { createTheme, createThemeContract } from '@vanilla-extract/css';
const contract = createThemeContract({
color: { primary: null, bg: null }
});
export const lightTheme = createTheme(contract, {
color: { primary: '#3b82f6', bg: '#ffffff' }
});
export const darkTheme = createTheme(contract, {
color: { primary: '#60a5fa', bg: '#111827' }
});styleVariants
Buat beberapa varian gaya tanpa pengulangan:
import { styleVariants } from '@vanilla-extract/css';
export const variants = styleVariants({
primary: { background: 'royalblue' },
danger: { background: 'crimson' },
ghost: { background: 'transparent', border: '1px solid royalblue' }
});
// <Button className={variants[variant]}>Recipe dengan @vanilla-extract/recipes
Fungsi recipe dari paket recipes menggabungkan gaya dasar dan varian dengan rapi:
import { recipe } from '@vanilla-extract/recipes';
export const button = recipe({
base: { padding: '10px 20px', borderRadius: '4px' },
variants: {
color: {
primary: { background: 'royalblue', color: 'white' },
danger: { background: 'crimson', color: 'white' }
},
size: {
sm: { fontSize: '0.875rem' },
lg: { fontSize: '1.25rem' }
}
}
});Sprinkles untuk Kelas Utilitas
@vanilla-extract/sprinkles menghasilkan kelas utilitas dari sekumpulan token—seperti Tailwind yang aman terhadap tipe dan tidak memiliki biaya waktu jalan:
Keamanan Tipe
Karena gaya berupa objek TypeScript, Anda mendapatkan pelengkapan otomatis IDE dan pemeriksaan tipe penuh untuk nama serta nilai properti CSS. Kesalahan ketik pada nama properti terdeteksi saat waktu build, bukan saat waktu jalan.
Integrasi Alat Build
Vanilla Extract terintegrasi dengan Vite, webpack, esbuild, dan Next.js melalui adaptor khusus. CSS yang diekstrak disajikan sebagai berkas statis.
Kapan Memilih Vanilla Extract
Pilih Vanilla Extract jika Anda menginginkan:
- Keamanan tipe TypeScript penuh untuk gaya Anda
- Tanpa overhead CSS-in-JS saat waktu jalan
- Hasil CSS statis untuk kinerja maksimal
- Sistem tema yang tangguh dengan contract token yang diperiksa tipenya
Pemeriksaan Singkat
Apa keunggulan kinerja utama Vanilla Extract dibandingkan CSS-in-JS saat waktu jalan seperti styled-components?
Rangkuman
Vanilla Extract adalah pustaka CSS-in-JS yang mengutamakan TypeScript dan tidak memiliki biaya waktu jalan. Tentukan gaya dalam berkas .css.ts menggunakan objek JavaScript yang aman terhadap tipe. Waktu build menghasilkan berkas CSS statis. Contract tema menyediakan dukungan untuk banyak tema dengan pemeriksaan tipe. styleVariants dan recipe menangani varian komponen dengan rapi. Tanpa biaya waktu jalan, pustaka ini ideal untuk aplikasi yang kritis terhadap kinerja.
Belajar CSS dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Vanilla Extract: CSS-in-JS Tanpa Waktu Jalan” gratis?
Ya — teks lengkap “Vanilla Extract: CSS-in-JS Tanpa Waktu Jalan” 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 “Vanilla Extract: CSS-in-JS Tanpa Waktu Jalan”?
Tuliskan CSS yang aman terhadap tipe dengan Vanilla Extract, yang menghasilkan berkas CSS statis saat pembangunan. 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 4 dari 4.
Berapa lama pelajaran “Vanilla Extract: CSS-in-JS Tanpa Waktu Jalan” 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