08 · CSS Architecture & Tools
Fase: 3 · Estimasi: 2 minggu · Prasyarat: 03 CSS, 07 Framework
Kenapa ini penting
CSS mudah ditulis tapi sulit dijaga di skala besar karena semuanya global. Arsitektur CSS adalah cara mengendalikan scope, specificity, dan konsistensi visual saat tim dan codebase membesar.
Peta konsep
Dasar
- Metodologi: BEM, (OOCSS, SMACSS, ITCSS untuk konteks)
- Utility-first: Tailwind CSS
- Preprocessor: Sass; post-processor: PostCSS (autoprefixer, nesting)
Menengah
- CSS Modules (scope lewat build tool)
- CSS-in-JS runtime (styled-components, Emotion) vs zero-runtime (Vanilla Extract, Panda CSS, Linaria)
- Design tokens: primitive → semantic → component tokens
- Component library: shadcn/ui (copy-paste), Mantine, Radix (headless)
- Theming dan dark mode
Deep dive
- Biaya runtime CSS-in-JS (serialisasi style, insert rule) dan dampaknya di React 18+
- Cara Tailwind JIT bekerja: scan source → generate CSS
-
@layersebagai solusi native untuk konflik specificity - Design system: governance, versioning, dokumentasi
Cara belajar
- Styling satu komponen Card yang sama dengan 5 pendekatan: BEM, CSS Modules, Tailwind, styled-components, Vanilla Extract. Bandingkan ukuran bundle dan pengalaman menulisnya.
- Ukur biaya runtime CSS-in-JS dengan Performance panel pada list 1.000 item.
- Rancang token untuk tema light/dark dengan tiga lapis (primitive, semantic, component).
Uji pemahaman
- Masalah apa yang diselesaikan BEM, dan masalah apa yang tidak?
- Kenapa CSS-in-JS runtime bermasalah dengan streaming SSR dan Server Components?
- Apa trade-off copy-paste component (shadcn/ui) dibanding library ber-versi (npm)?
- Kapan utility-first jadi tidak bisa dibaca, dan bagaimana mengatasinya?
Proyek latihan
| Tingkat | Proyek | Yang dilatih |
|---|---|---|
| Dasar | Konversi halaman BEM ke Tailwind | Metodologi |
| Menengah | Paket design tokens yang menghasilkan CSS variables + TS constants | Tokens |
| Deep | Plugin PostCSS kecil (misalnya mengubah px ke rem) | AST CSS |
Sumber primer
Toolkit terkait
@chalidade/utils:cx@chalidade/tokens: token primitif + semantik, tema terang/gelap