Thời lượng: 1 tuần
Level: Advanced
Yêu cầu: Hoàn thành các module Foundation (1-3)
Tổng quan Module
Trong Design System, việc chọn cách viết CSS quan trọng ngang với việc chọn framework. Một Styling System tốt phải đảm bảo: Cô lập styles (Scoping), hỗ trợ Theming tốt và không làm nặng bundle size (Performance).
Kết quả học tập
Sau module này, bạn sẽ:
- Phân biệt được ưu/nhược điểm của 3 trường phái: CSS-in-JS, CSS Modules, và Utility-First (Tailwind).
- Xây dựng hệ thống Theming linh hoạt trên từng quy mô.
- Tối ưu hóa CSS Performance (Critical CSS, Tree-shaking).
- Biết cách quản lý CSS cho Multi-package Design System.
Bài 8.1: So sánh các Styling Approaches
Lý thuyết
1. CSS Modules: Cách tiếp cận truyền thống nhưng hiện đại hóa. Styles được cô lập theo file.
- Ưu: Zero runtime, syntax chuẩn CSS, cache tốt.
- Nhược: Khó share dynamic variables từ JS.
2. CSS-in-JS (Styled-components, Emotion): Viết CSS trực tiếp bằng JavaScript.
- Ưu: Dynamic tuyệt đối, cô lập style cực tốt, trải nghiệm Dev sướng.
- Nhược: Runtime overhead (làm chậm render), bundle size lớn hơn.
3. Utility-First (Tailwind CSS): Sử dụng các lớp CSS dựng sẵn gắn liền với Tokens.
- Ưu: Ship code cực nhanh, bundle size không tăng theo quy mô dự án.
- Nhược: JSX trông rối, khó đóng gói thành một thư viện components độc lập hoàn toàn.
Bài 8.2: Scoping & Theming Strategies
Lý thuyết
Scoping (Cô lập):
Tránh việc class .button của DS làm ảnh hưởng đến .button của app. CSS Modules và CSS-in-JS giải quyết việc này bằng cách tự động hash tên class.
Theming nâng cao: Ngoài Light/Dark mode, hãy nghĩ về:
- Tenant Theming: Mỗi thương hiệu con có một màu sắc riêng.
- Density Theming: Chế độ hiển thị Compact (cho power users) và Comfortable (cho mobile).
Thực hành: Styling Performance Simulator
Hãy thử nghiệm cách các Styling System ảnh hưởng đến hiệu năng và code size:
Bài 8.3: Performance Optimization
Lý thuyết
1. CSS Shaking: Với Utility CSS, chỉ những classes thực sự sử dụng mới được đóng gói vào production (PurgeCSS).
2. Runtime CSS-in-JS vs Zero-runtime: Xu hướng mới là các thư viện CSS-in-JS không có runtime (vd: Panda CSS, Vanilla Extract) - mang lại trải nghiệm viết JS nhưng tốc độ build ngang CSS thuần.
Câu hỏi thảo luận
- Trade-offs: Tại sao nhiều công ty lớn (Meta, Twitter) lại chuyển từ CSS-in-JS sang Atomatic CSS (giống Tailwind)?
- Maintenance: Hệ thống nào dễ bảo trì nhất sau 3 năm khi dự án phình to?
- Multi-framework: Nếu DS cấp cho cả React và Vue, bạn sẽ chọn styling system nào?
Tổng kết Module
Bạn đã học:
- Ưu và nhược điểm của các phương pháp Styling phổ biến.
- Cách thiết kế Theming System ở mức độ chuyên sâu.
- Các chiến lược tối ưu hóa hiệu năng render.
Bước tiếp theo
Module 9 sẽ dạy bạn về Component Testing - cách bảo vệ Design System của bạn khỏi các lỗi hiển thị và logic bằng Unit test và Visual Regression test.