𝗣𝗲𝗻𝗲𝗻𝘁𝘂𝗮𝗻 𝗧𝗲𝗺𝗮 𝗗𝗶𝗻𝗮𝗺𝗶𝗸 𝗧𝗮𝗻𝗽𝗮 𝗖𝗦𝗦-𝗶𝗻-𝗝𝗦
Saya dahulunya peminat tegar styled-components. Saya sukakan fleksibilitinya. Kemudian, saya menghadapi jalan buntu.
Satu projek memerlukan pengurangan berat runtime. Saya memutuskan untuk mencuba CSS Modules dan CSS asli. Hasilnya mengejutkan saya. Saya memadamkan styled-components, Emotion, dan goober daripada projek saya. Saya tidak kehilangan apa-apa yang sebenarnya saya perlukan.
Keuntungan terbesar bukan sekadar prestasi. Ia adalah dengan menghapuskan kebergantungan gaya (styling). Dalam satu projek, runtime CSS-in-JS mengambil sebanyak 30% daripada bundle klien.
CSS biasa telah berkembang maju. Anda tidak lagi memerlukan perpustakaan JS yang berat untuk tugasan ini:
• Nesting: Gunakan nesting CSS asli. • Anjakan warna: Gunakan color-mix(). • Kawalan spesifisiti: Gunakan @layer. • Komponen responsif: Gunakan container queries.
Berikut adalah cara anda membina tema hanya dengan menggunakan satu fail dan properti tersuai (custom properties).
- Takrifkan token dalam fail CSS.
:root { --color-bg: #ffffff; --color-text: #1a1a1a; --color-accent: #3c7dc4; }
[data-theme="dark"] { --color-bg: #14161a; --color-text: #f5f5f0; --color-accent: #6aa6e8; }
- Gunakan pemboleh ubah tersebut dalam komponen anda.
.button { background: var(--color-accent); color: var(--color-bg); }
- Tukar tema dengan mengubah satu atribut sahaja.
function setTheme(theme) { document.documentElement.dataset.theme = theme; localStorage.setItem("theme", theme); }
Komponen tidak memerlukan ThemeProvider. Ia tidak perlu melakukan re-render. Pelayar mengendalikan kemas kini melalui cascade. Ini membolehkan sebahagian besar aplikasi anda kekal dalam Server Components.
Untuk mengelakkan "flash" tema yang salah semasa pemuatan halaman, gunakan skrip inline kecil dalam bahagian head HTML anda:
Berhenti menggunakan JS untuk menjana gaya pada runtime. Gunakan pemboleh ubah CSS asli untuk token anda. Ia menghasilkan kod yang lebih sedikit dan masa pemuatan yang lebih pantas.
Sumber: https://dev.to/kirill_c_7b35589230/dynamic-theming-without-css-in-js-d7e