Kiến trúc CSS hiện đại

Ôn tập: Trong bài học trước, bạn đã học về Semantic HTML — nền tảng cho các trang web dễ truy cập và thân thiện với SEO. Bây giờ, hãy cùng tạo kiểu cho những trang đó bằng CSS hiện đại, đáp ứng, dễ bảo trì và thân thiện với AI.

CSS hiện đại mạnh mẽ hơn rất nhiều so với vài năm trước. Grid, Flexbox, Container Queries, thuộc tính tùy chỉnh và các lớp xếp tầng giải quyết những vấn đề trước đây cần JavaScript hoặc các thủ thuật phức tạp. AI tạo CSS tốt — nhưng thường mặc định sử dụng các mẫu cũ hơn khi có những giải pháp hiện đại.

Các token thiết kế: Nền tảng CSS của bạn

Định nghĩa một lần, sử dụng ở mọi nơi:

📍 Nơi dán: Mở ChatGPT (chat.openai.com), Claude (claude.ai) hoặc Gemini (gemini.google.com) và bắt đầu một cuộc trò chuyện mới.

:root {
  /* Colors */
  --color-primary: #3b82f6;
  --color-text: #1f2937;
  --color-bg: #ffffff;
  --color-border: #e5e7eb;

  /* Spacing (8px base scale) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */

  /* Typography */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;

  /* Other */
  --radius-md: 0.5rem;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 5%);
}

📍 Nơi dán: Mở ChatGPT (chat.openai.com), Claude (claude.ai) hoặc Gemini (gemini.google.com) và bắt đầu một cuộc trò chuyện mới.

📋 Cách sao chép prompt này: Nhấp vào bất kỳ đâu bên trong khối màu xám, nhấn Cmd+A rồi Cmd+C (Mac) hoặc Ctrl+A rồi Ctrl+C (Windows). Hoặc sử dụng biểu tượng sao chép xuất hiện.

👀 Những gì bạn sẽ thấy: Trong vòng vài giây, AI sẽ trả về một phản hồi có cấu trúc dựa vào prompt ở trên. Hãy đọc kỹ và coi đó là bản nháp, không phải câu trả lời cuối cùng.

Prompt AI để trích xuất token:

Phân tích file CSS này và trích xuất tất cả các giá trị được hardcode thành những thuộc tính tùy chỉnh CSS. Nhóm thành: màu sắc, khoảng cách, kiểu chữ, đường viền, bóng. Đặt tên cho các token một cách mô tả (--color-primary, --space-4, --text-lg). Hiển thị định nghĩa token và CSS đã được chỉnh sửa lại.

CSS Grid: Bố cục hai chiều

Lưới thẻ (tự động điều chỉnh, không cần truy vấn media):

✏️ Cách điền thông tin chi tiết của bạn: Thay thế mỗi [] và trình giữ chỗ trong ngoặc bằng thông tin cụ thể từ tình huống thực tế của bạn. Thông tin đầu vào mơ hồ sẽ tạo ra kết quả mơ hồ — hãy cụ thể.

👀 Những gì bạn sẽ thấy: Trong vòng vài giây, AI sẽ trả về một phản hồi có cấu trúc dựa vào prompt ở trên. Hãy đọc kỹ và coi đó là bản nháp, không phải câu trả lời cuối cùng.

📌 Những việc cần làm với kết quả: Lưu phản hồi vào file Notes. Chọn gợi ý có tác động cao nhất và thực hiện nó trong tuần này — đừng cố gắng làm tất cả cùng một lúc.

⚠️ Nếu kết quả không ổn: Nếu các gợi ý có vẻ chung chung, hãy dán nội dung sau: "Hãy cụ thể hơn với ngữ cảnh thực tế của tôi. Bỏ qua lời khuyên chung chung." Nếu nó bỏ qua các chi tiết quan trọng bạn đã cung cấp, hãy hỏi: "Bạn đã bỏ sót [X] trong ngữ cảnh của tôi — hãy thực hiện lại với điều đó làm ràng buộc chính."

css
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

Bố cục trang (thanh bên + chính):

.page-layout {
  display: grid;
  grid-template-columns: minmax(250px, 300px) 1fr;
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
  }
}

Flexbox: Căn chỉnh một chiều

Thanh điều hướng:

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

Khi nào nên sử dụng Grid thay cho Flexbox:

Container Queries

Các thành phần phản hồi theo container của chúng, chứ không phải viewport:

.card-container {
  container-type: inline-size;
}

.card {
  /* Default: compact layout */
  display: flex;
  flex-direction: column;
}

@container (min-width: 400px) {
  .card {
    /* Wide layout: horizontal */
    flex-direction: row;
  }
}

Prompt AI về Container Queries:

Tái cấu trúc các truy vấn media của thành phần này để sử dụng Container Queries. Thành phần nên thích ứng dựa trên chiều rộng container của nó, chứ không phải viewport. Hiển thị thiết lập container-type và các quy tắc @container thay thế @media.

Dark Mode với các thuộc tính tùy chỉnh

/* Light mode (default) */
:root {
  --color-text: #1f2937;
  --color-bg: #ffffff;
  --color-border: #e5e7eb;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #f3f4f6;
    --color-bg: #111827;
    --color-border: #374151;
  }
}

Vì tất cả CSS của bạn sử dụng var(--color-text) thay vì #1f2937, Dark Mode hoạt động bằng cách thay đổi giá trị token — không cần sao chép CSS.

✅ Kiểm tra nhanh: AI tạo bố cục đáp ứng bằng cách sử dụng width: 33.333% trên các phần tử con. Giải pháp thay thế hiện đại là gì?

Đáp án: display: grid; grid-template-columns: repeat(3, 1fr); — hoặc tốt hơn nữa, repeat(auto-fill, minmax(250px, 1fr)) để có hành vi tự động đáp ứng. Chiều rộng phần trăm không tính đến khoảng cách, yêu cầu các thủ thuật về lề và không thích ứng với những kích thước container khác nhau. Grid xử lý tất cả những điều này một cách tự nhiên.)

Những điểm chính cần ghi nhớ

• Các thuộc tính tùy chỉnh CSS (code thiết kế) là nền tảng của CSS dễ bảo trì: Xác định màu sắc, khoảng cách và kiểu chữ một lần trong :root, sử dụng var(--token-name) ở mọi nơi và bật Dark Mode bằng cách xác định lại các token trong @media (prefers-color-scheme: dark) — những thay đổi một dòng được lan truyền toàn hệ thống

• CSS Grid với auto-fill và minmax() tạo bố cục thẻ đáp ứng chỉ trong một dòng mà trước đây cần hơn 20 dòng CSS dựa trên float, và hỗ trợ các thẻ có chiều cao bằng nhau, khoảng cách nhất quán và tự động xuống dòng mà không cần truy vấn media

• Container Queries cho phép các thành phần phản hồi theo chiều rộng của container thay vì viewport — giúp những thành phần thực sự có thể tái sử dụng trong các ngữ cảnh bố cục khác nhau (trang toàn chiều rộng, thanh bên, cửa sổ pop-up) mà không cần ghi đè cụ thể theo breakpoint.