Mobile-first approach là gì?

Mobile-first nghĩa là CSS mặc định viết cho màn hình nhỏ, rồi dùng min-width để bổ sung cho màn lớn hơn.

/* base: mobile — không media query */
.nav { display: flex; flex-direction: column; gap: 8px; }

/* bổ sung khi có chỗ */
@media (min-width: 768px) {
  .nav { flex-direction: row; gap: 24px; }
}

So với desktop-first:

/* desktop-first: base là desktop, phải GỠ BỎ dần cho mobile */
.nav { display: flex; flex-direction: row; gap: 24px; }
@media (max-width: 767px) {
  .nav { flex-direction: column; gap: 8px; }   /* ghi đè lại thứ vừa viết */
}

Ba lý do chọn mobile-first:
1. Ít ghi đè hơn — mỗi breakpoint thêm thứ mới thay vì huỷ thứ cũ, CSS ngắn và dễ lần hơn.
2. Ép ưu tiên nội dung — màn hình nhỏ không đủ chỗ cho mọi thứ, buộc phải quyết định cái gì quan trọng.
3. Phù hợp thực tế truy cập — phần lớn lưu lượng ở Việt Nam đến từ điện thoại.

Lưu ý: đừng trộn min-width và max-width trong cùng một dự án. Hai chiều ghi đè nhau và thứ tự khai báo bắt đầu quyết định kết quả — chọn một hướng rồi giữ nhất quán.

Ghi chú: mobile-first là quy ước viết CSS, không đồng nghĩa với việc tải ít tài nguyên hơn trên mobile — muốn nhẹ hơn thật thì phải xử lý ở srcset, lazy load và tách bundle.