Mobile-first nghĩa là viết style cơ bản cho màn hình nhỏ nhất, rồi thêm độ phức tạp cho màn hình lớn hơn bằng media query min-width — thay vì bắt đầu từ desktop và lược bỏ dần.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Tại sao mobile-first thắng: CSS cơ bản giữ tối thiểu (mobile chỉ nhận những gì nó cần — tốt cho hiệu năng trên thiết bị yếu), và bạn thêm dần độ phức tạp, vốn dễ suy luận hơn là ghi đè/loại bỏ. Nó cũng khớp với cách nội dung tự nhiên reflow từ một cột thành nhiều cột.
Media query phản hồi theo viewport — toàn bộ cửa sổ. Nhưng một component tái sử dụng (chẳng hạn một card) có thể xuất hiện trong một vùng main rộng hoặc trong một sidebar hẹp trên cùng một trang. Chiều rộng viewport không cho biết component thực sự có bao nhiêu chỗ.
.card-wrapper {
container-type: inline-size; /* khai báo nó là một query container */
}
/* tạo style cho card dựa trên chiều rộng của CONTAINER, không phải viewport */
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: auto 1fr; }
}
Giờ cùng một card tự động chuyển sang layout ngang bất cứ khi nào container của nó ≥400px — dù vì màn hình lớn hay vì nó nằm trong một cột rộng. Component trở nên thực sự độc lập với ngữ cảnh và tái sử dụng được.
Mobile-first giữ CSS responsive gọn nhẹ và dễ bảo trì.
Container query là một bước tiến lớn: chúng cho phép component phản hồi theo không gian khả dụng của chính nó, đúng là thứ bạn cần trong kiến trúc dựa trên component (design system, card/widget tái sử dụng) nơi cùng một component xuất hiện trong nhiều ngữ cảnh.