Skip to main content

UI Coding Rules

Không sử dụng inline style​

Không dùng inline style (attribute style={{ ... }}). Style được định nghĩa qua:

  • CSS module (.module.css),
  • Tailwind (class),
  • hoặc styled-component / CSS-in-JS theo quy ước dự án.

Ví dụ:

// ❌ Tránh
<div style={{ marginTop: 16, color: 'red' }}>...</div>

// ✅ Tốt (CSS module)
<div className={styles.container}>...</div>

// ✅ Tốt (Tailwind)
<div className="mt-4 text-red-500">...</div>

Không sử dụng inline function trong component​

Không truyền inline function (hàm tạo mới mỗi lần render) vào prop của component, đặc biệt component con là React.memo hoặc nằm trong list. Nên dùng useCallback để định nghĩa handler và truyền reference ổn định.

Ví dụ:

// ❌ Tránh: tạo hàm mới mỗi lần render
<Button onClick={() => handleSave(id)} />;

// ✅ Tốt
const handleClick = useCallback(() => handleSave(id), [id]);
<Button onClick={handleClick} />;

Nếu handler đơn giản và không ảnh hưởng performance (ví dụ không trong list dài), team có thể cho phép ngoại lệ; nên thống nhất trong code review.