CSS Modules là gì?

CSS Modules biên dịch mỗi file .module.css thành các class được đổi tên duy nhất, nên style không rò ra ngoài component.

/* Button.module.css */
.root { padding: 8px 16px; border-radius: 8px; }
.primary { background: var(--accent-solid); color: #fff; }

import styles from './Button.module.css'

export function Button({ primary }: { primary?: boolean }) {
  return <button className={`${styles.root} ${primary ? styles.primary : ''}`} />
}

Sau khi build, .root trở thành Button_root__x7f2a — hai component cùng đặt tên .root không đụng nhau.

Đặc điểm quan trọng: toàn bộ xử lý ở build time, không có runtime nào. Khác hẳn CSS-in-JS chạy lúc render.

Hai tính năng ít người dùng nhưng hữu ích:

:global(.markdown h2) { margin-block: 1em; }   /* thoát scope có chủ đích */
.btn { composes: base from './base.module.css'; }   /* tái sử dụng */

Lưu ý 1: tên class có dấu gạch ngang phải truy cập bằng ngoặc vuông: styles['btn-primary']. Vì vậy quy ước trong CSS Modules thường là camelCase.

Lưu ý 2: composes chỉ dùng được trong CSS Modules, không phải cú pháp CSS chuẩn — chuyển sang giải pháp khác là phải viết lại.