Phong cách viết CSS đã thay đổi từ việc "viết gì cũng được" sang "viết sao cho không bị loạn".
1. Runtime CSS-in-JS vs Static CSS
Bad Practice: Lạm dụng Styled-components trong Server Components
Sử dụng các thư viện tính toán CSS tại runtime (như styled-components hoặc emotion) trong Next.js App Router mà không hiểu rằng chúng yêu cầu Client-side JS để hoạt động.
Good Practice: Utility-first or Zero-runtime CSS
Sử dụng Tailwind CSS, CSS Modules, hoặc Vanilla Extract. Những lựa chọn này tạo ra CSS tĩnh tại thời điểm build, giúp Server Components thực sự nhẹ.
// ✅ Tốt: CSS sinh ra là text tĩnh, không tốn CPU trình duyệt để tính toán
<div className="flex items-center gap-4 p-8 bg-zinc-50 border border-zinc-200">
<h1 className="text-xl font-bold">Design System</h1>
</div>2. Magic Numbers vs Design Tokens
Bad Practice: Dùng trị số cứng (Hard-coded values)
Sử dụng các con số ngẫu nhiên cho margin, padding, colors ở khắp mọi nơi.
<div style={{ padding: '13px', backgroundColor: '#f3a211' }}>...</div>Good Practice: Strict Token Usage
Luôn sử dụng biến hoặc utility classes từ hệ thống đã định nghĩa sẵn. Nếu không có giá trị phù hợp, hãy cập nhật config hệ thống thay vì tự chế số mới.
// Tailwind config or global CSS tokens
<div className="p-4 bg-primary-500 text-main">...</div>3. Conditional Classes
Bad Practice: Nối chuỗi string thủ công
Dễ gây lỗi thiếu khoảng trắng hoặc logic phức tạp khó đọc.
const className = 'btn ' + (active ? 'active' : '') + ' disabled'; // Rủi ro: 'btn active disabled'Good Practice: clsx or tailwind-merge
Sử dụng thư viện để quản lý việc gộp class một cách thông minh.
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
// Cách dùng cực sạch
<button className={cn('btn', active && 'active', 'disabled')}>...</button>Tổng kết "Failure to Feature"
Thất bại lớn nhất trong Styling là tạo ra một hệ thống mà không ai dám sửa vì sợ hỏng những chỗ khác. Bằng cách áp dụng Utility-first và Design Tokens, chúng ta biến CSS từ một gánh nặng bảo trì thành một bộ công cụ mạnh mẽ, nhất quán và có thể mở rộng vô hạn.