Tạo kiểu CSS và thiết kế đáp ứng với AI

🔄 Tóm tắt nhanh: Trong bài học trước, bạn đã xây dựng cấu trúc HTML ngữ nghĩa với AI — bố cục trang, biểu mẫu và điều hướng dễ truy cập. Bây giờ, hãy làm cho chúng trông đẹp mắt hơn với CSS.

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

Trước khi viết bất kỳ kiểu dáng thành phần nào, hãy thiết lập hệ thống thiết kế của bạn:

📍 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.

Tạo file thuộc tính tùy chỉnh CSS (biến) cho hệ thống thiết kế website:

Màu sắc thương hiệu:
- Màu chính: [màu thương hiệu của bạn, ví dụ: #3b82f6]
- Màu phụ: [màu phụ]
- Màu nhấn: [màu nhấn cho các nút kêu gọi hành động]

Tạo từ các màu cơ bản này:
1. Thang màu: 50, 100, 200, ..., 900 cho màu chính và màu phụ
2. Màu ngữ nghĩa: thành công, cảnh báo, lỗi, thông tin
3. Màu bề mặt: nền, bề mặt, bề mặt nổi (chế độ sáng và tối)
4. Màu chữ: chính, phụ, mờ, trên màu chính

Thang khoảng cách:
- Đơn vị cơ bản 8px: khoảng cách-1 (4px) đến khoảng cách-20 (160px)

Kiểu chữ:
- Họ phông chữ: tiêu đề, nội dung, đơn sắc
- Thang kích thước: xs đến 4xl sử dụng clamp() để điều chỉnh kích thước linh hoạt
- Chiều cao dòng và độ đậm phông chữ

Bán kính viền: nhỏ, vừa, lg, xl, full
Bóng đổ: sm, md, lg, xl

Sử dụng :root cho chế độ sáng mặc định và @media (prefers-color-scheme: dark) cho chế độ tối.

✏️ ​​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 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.

📌 Nên làm gì 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 thử mọi thứ cùng một lúc.

⚠️ Nếu thấy không ổn: Nếu các gợi ý có vẻ chung chung, hãy dán nội dung này: "Hãy cụ thể hơn với ngữ cảnh thực tế của tôi. Bỏ qua những 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."

✅ Kiểm tra nhanh: Tại sao nên sử dụng clamp() cho kích thước phông chữ thay vì các giá trị cố định?

Vì clamp() tạo ra kiểu chữ linh hoạt, tự động điều chỉnh kích thước mượt mà giữa các kích thước màn hình. font-size: clamp(1rem, 2.5vw, 1.5rem) có nghĩa là phông chữ không bao giờ nhỏ hơn 1rem, không bao giờ lớn hơn 1.5rem và tự động điều chỉnh kích thước mượt mà giữa các kích thước — không cần điểm ngắt truy vấn media. Văn bản luôn dễ đọc trên thiết bị di động và luôn cân đối trên desktop.

Bố cục đáp ứng với lưới

Bố cục trang

Tạo bố cục trang đáp ứng bằng lưới CSS:

Cấu trúc:
- Tiêu đề (toàn chiều rộng, cố định)
- Thanh bên (bên trái, 280px trên desktop, ẩn trên thiết bị di động với nút bật/tắt)
- Nội dung chính (linh hoạt, căn giữa, chiều rộng tối đa 800px để dễ đọc)
- Footer (toàn chiều rộng)

Hành vi đáp ứng:
- Thiết bị di động (< 768px): Một cột, không có thanh bên, menu hamburger
- Máy tính bảng (768px - 1024px): Thanh bên thu gọn chỉ còn biểu tượng (64px)
- Desktop (> 1024px): Toàn bộ thanh bên hiển thị

Sử dụng phương pháp ưu tiên thiết bị di động (kiểu cơ bản cho thiết bị di động, truy vấn chiều rộng tối thiểu cho màn hình lớn hơn).
Sử dụng các thuộc tính tùy chỉnh CSS cho khoảng cách và màu sắc.
Không sử dụng framework — chỉ sử dụng CSS thuần túy.

Lưới thẻ

Tạo lưới thẻ đáp ứng bằng CSS Grid:

Yêu cầu:
- Thẻ tự động lấp đầy chiều rộng có sẵn
- Chiều rộng thẻ tối thiểu: 280px
- Chiều rộng thẻ tối đa: 1fr (linh hoạt)
- Khoảng cách nhất quán: var(--space-6)
- Các thẻ có chiều cao bằng nhau (kéo giãn đến thẻ cao nhất trong hàng)
- Nội dung thẻ: hình ảnh, tiêu đề, mô tả, nút được ghim ở dưới cùng

Sử dụng grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
Điện thoại di động: 1 cột. Máy tính bảng: 2 cột. Desktop: 3-4 cột (tự động).

Tạo kiểu thành phần

Nút

Tạo hệ thống nút bằng CSS:

Các loại nút:
- Chính (nền đặc, chữ trắng)
- Phụ (viền, đường viền và chữ màu)
- Ghost (chỉ chữ, hiệu ứng rê chuột nhẹ)
- Nguy hiểm (màu đỏ cho các hành động phá hoại)

Kích thước: nhỏ, trung bình (mặc định), lớn

Trạng thái cho mỗi loại: mặc định, rê chuột, hiển thị khi tập trung, hoạt động, bị vô hiệu hóa

Yêu cầu:
- Sử dụng thuộc tính tùy chỉnh CSS cho tất cả các màu
- Viền hiển thị khi tập trung (không phải khi tập trung) cho các chỉ báo chỉ dành cho bàn phím
- Chuyển đổi mượt mà (150ms)
- Trạng thái bị vô hiệu hóa làm giảm độ mờ, loại bỏ các sự kiện con trỏ
- Tất cả các kích thước duy trì tỷ lệ đệm nhất quán

Sử dụng .btn làm lớp cơ sở với các lớp bổ trợ (.btn-primary, .btn-sm, v.v.)

Thanh điều hướng

Tạo thanh điều hướng đáp ứng bằng CSS:

Desktop (> 768px):
- Bố cục ngang, logo bên trái, liên kết ở giữa, nút CTA bên phải
- Menu drop-down hiển thị khi di chuột với hiệu ứng chuyển động mượt mà
- Liên kết đang hoạt động được hiển thị bằng đường viền dưới

Thiết bị di động (< 768px):
- Logo bên trái, biểu tượng hamburger bên phải
- Menu trượt vào từ bên phải (ngoài khung hình) khi được bật/tắt
- Lớp phủ toàn chiều cao với vùng chạm lớn (tối thiểu 48px)
- Các mục drop-down mở rộng theo chiều dọc

Sử dụng Flexbox cho bố cục thanh điều hướng.
Bao gồm các hiệu ứng chuyển tiếp mượt mà cho trạng thái di chuột và bật/tắt menu trên thiết bị di động.
Nút bật/tắt menu trên thiết bị di động sẽ cần một đoạn code JavaScript nhỏ (cung cấp riêng).

Dark Mode

Thêm hỗ trợ dark mode vào bảng định kiểu này:

[dán CSS hiện có của bạn]

Yêu cầu:
1. Sử dụng @media (prefers-color-scheme: dark) để phát hiện tùy chọn hệ thống
2. Chỉ ghi đè các thuộc tính tùy chỉnh CSS (màu sắc, bóng) — không phải kiểu thành phần
3. Đảm bảo tỷ lệ tương phản đủ (WCAG AA: 4.5:1 cho văn bản)
4. Điều chỉnh màu bóng (bóng ở chế độ tối nên sử dụng giá trị rgba tối hơn)
5. Hình ảnh và minh họa: thêm giảm độ sáng nhẹ

Cũng thêm một lớp bật/tắt thủ công (.dark-mode trên body) để ghi đè tùy chọn hệ thống.

✅ Kiểm tra nhanh: Tại sao lại ghi đè các thuộc tính tùy chỉnh thay vì viết lại kiểu thành phần cho dark mode?

Bởi vì nếu các thành phần của bạn sử dụng var(--color-bg) và var(--color-text), việc chuyển sang dark mode chỉ có nghĩa là thay đổi định nghĩa biến — chứ không phải mọi thành phần. Một nút sử dụng thuộc tính background: var(--color-primary) và color: var(--color-on-primary) hoạt động ở cả hai chế độ mà không cần thêm bất kỳ CSS nào. Đây chính là sức mạnh của các token thiết kế: Một thay đổi sẽ lan truyền đến mọi nơi.

Kiểm tra CSS

Sau khi AI tạo ra CSS, hãy kiểm tra các vấn đề thường gặp sau:

Xem xét CSS này về chất lượng và các thực tiễn tốt nhất:

[dán CSS của bạn]

Kiểm tra:
1. Màu sắc hoặc khoảng cách được mã hóa cứng (nên sử dụng thuộc tính tùy chỉnh)
2. Thiếu truy vấn media ưu tiên thiết bị di động (nên sử dụng `min-width`, không phải `max-width`)
3. Các vấn đề về khả năng truy cập (độ tương phản, trạng thái lấy nét, vùng chạm)
4. Các vấn đề về hiệu suất (bộ chọn tốn kém, bóng đổ lớn, hoạt ảnh quá mức)
5. Thiếu xem xét dark mode
6. Quy ước đặt tên không nhất quán
7. Xung đột độ ưu tiên hoặc sử dụng `!important`

Đề xuất cải tiến cho mỗi vấn đề được tìm thấy.

Bài tập: Tạo kiểu cho trang của bạn

1. Tạo một file code thiết kế bằng cách sử dụng prompt thuộc tính tùy chỉnh
2. Tạo kiểu cho trang HTML bạn đã xây dựng trong Bài học 2 với bố cục đáp ứng (Lưới)
3. Thêm một phần lưới thẻ với ít nhất 4 thẻ
4. Thêm hệ thống nút với các biến thể chính và phụ
5. Thêm hỗ trợ dark mode bằng cách sử dụng ghi đè thuộc tính tùy chỉnh
6. Kiểm tra ở chiều rộng thiết bị di động (375px), máy tính bảng (768px) và desktop (1200px)

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

• Bắt đầu mọi dự án với code thiết kế (thuộc tính tùy chỉnh CSS) — màu sắc, khoảng cách, kiểu chữ và bóng được xác định một lần và được sử dụng ở mọi nơi
• CSS ưu tiên thiết bị di động (kiểu cơ bản + truy vấn chiều rộng tối thiểu) sạch hơn CSS ưu tiên desktop (ghi đè + truy vấn chiều rộng tối đa)
• CSS Grid xử lý bố cục hai chiều (cấu trúc trang, lưới thẻ); Flexbox xử lý căn chỉnh một chiều (thanh điều hướng, nội dung bên trong thẻ)
• Sử dụng clamp() để có kiểu chữ linh hoạt, tự động điều chỉnh kích thước mượt mà mà không cần điểm ngắt
• Dark mode trở nên đơn giản khi các thành phần sử dụng thuộc tính tùy chỉnh — ghi đè các token, chứ không phải các thành phần
• Luôn kiểm tra CSS do AI tạo ra để tìm các giá trị được hardcode, trạng thái tiêu điểm bị thiếu và những vấn đề về độ tương phản khả năng truy cập