Tại sao Dark Mode không nên là một file CSS riêng biệt: Góc nhìn từ chuyên gia Frontend

Bài viết được dịch và tổng hợp từ tin tức gốc. Bạn có thể đọc bài viết gốc bằng tiếng Anh tại đây.

Điểm tin nhanh:

• Tách file CSS cho Dark Mode làm tăng số lượng request HTTP và gây ra hiện tượng chớp nháy giao diện (FOUC).
• Sử dụng CSS Variables (Custom Properties) là tiêu chuẩn vàng để quản lý theme linh hoạt và hiệu quả.
• Kỹ thuật CSS hiện đại như :has() và @media (prefers-color-scheme) giúp việc chuyển đổi theme trở nên mượt mà mà không cần thay đổi cấu trúc file.

Trong kỷ nguyên phát triển web hiện đại, việc cung cấp chế độ Dark Mode đã trở thành một yêu cầu bắt buộc đối với mọi sản phẩm công nghệ. Tuy nhiên, nhiều lập trình viên vẫn mắc kẹt trong tư duy cũ kỹ: tạo ra một file dark-mode.css riêng biệt và load nó khi người dùng chuyển đổi theme. Đây không chỉ là một giải pháp thiếu tinh tế mà còn là một gánh nặng kỹ thuật tiềm ẩn, ảnh hưởng trực tiếp đến hiệu năng và khả năng bảo trì của dự án.

Sai lầm từ việc tách file CSS

Việc duy trì hai bộ CSS riêng biệt cho Light và Dark mode tạo ra sự dư thừa mã nguồn (code duplication) không cần thiết. Khi bạn muốn thay đổi một thuộc tính như border-radius hay font-size, bạn buộc phải cập nhật ở cả hai file. Nếu không cẩn thận, sự sai lệch giữa hai file này sẽ dẫn đến những lỗi hiển thị khó chịu.

Ngoài ra, việc load thêm một file CSS mới khi người dùng chuyển đổi theme sẽ gây ra độ trễ (latency). Nếu bạn đang tối ưu hóa trải nghiệm người dùng như cách chúng ta đã thảo luận trong bài viết về xây dựng công cụ chuyển đổi CSV sang JSON không phụ thuộc thư viện, bạn sẽ hiểu rằng mỗi byte dữ liệu và mỗi request đều quan trọng.

Sức mạnh của CSS Variables và Theme-Aware Design

Thay vì tách file, hãy sử dụng CSS Variables (Custom Properties). Đây là giải pháp tối ưu nhất để quản lý trạng thái giao diện. Bằng cách định nghĩa các biến màu sắc tại :root, bạn có thể dễ dàng ghi đè giá trị của chúng dựa trên class của thẻ body hoặc html.

Mẹo hay: Hãy sử dụng tiền tố -- cho các biến CSS để đảm bảo tính nhất quán trong toàn bộ codebase. Ví dụ: --bg-primary, --text-main.

So sánh phương pháp truyền thống và hiện đại

Nếu bạn đang gặp khó khăn trong việc quản lý cấu trúc code phức tạp, hãy tham khảo thêm về tối ưu hóa kiến trúc mã nguồn cho con người và AI Agent để tổ chức các file CSS của bạn một cách khoa học hơn.

Kỹ thuật CSS hiện đại: :has() và Media Queries

Với sự hỗ trợ của selector :has(), bạn có thể kiểm soát theme dựa trên trạng thái của các phần tử cha mà không cần dùng đến JavaScript phức tạp. Kết hợp với @media (prefers-color-scheme: dark), bạn có thể tự động đồng bộ theme của website với cài đặt hệ thống của người dùng.

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

body.dark-theme {
  --bg-color: #000000;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Đánh giá & Lời khuyên Thực tiễn

Từ góc độ của một Tech Lead, tôi đánh giá việc sử dụng CSS Variables là bắt buộc trong các dự án hiện đại.

• Ưu điểm: Hiệu năng cao, dễ dàng mở rộng, hỗ trợ tốt cho các thiết kế phức tạp.
• Nhược điểm: Cần thời gian để refactor lại các dự án cũ sử dụng hard-coded color.
• Lưu ý: Khi triển khai trên Production, hãy đảm bảo bạn có một cơ chế fallback cho các trình duyệt cũ không hỗ trợ CSS Variables, mặc dù hiện nay hầu hết các trình duyệt hiện đại đều đã hỗ trợ tốt.

Nếu bạn đang xây dựng các nền tảng yêu cầu hiệu năng cực cao như nền tảng thi đấu lập trình thời gian thực CodeComplex, việc giảm thiểu request là ưu tiên hàng đầu. Đừng để những file CSS thừa thãi làm chậm trải nghiệm của người dùng.

Câu hỏi thường gặp (FAQ)

Tại sao tôi không nên dùng JavaScript để load file CSS?

Việc dùng JS để load file CSS gây ra hiện tượng FOUC (Flash of Unstyled Content), khiến người dùng thấy giao diện bị vỡ hoặc nhấp nháy khi trang đang tải.

CSS Variables có ảnh hưởng đến hiệu năng không?

Hoàn toàn không, CSS Variables được trình duyệt xử lý cực kỳ nhanh chóng và hiệu quả hơn nhiều so với việc parse lại toàn bộ một file CSS mới.

Làm sao để hỗ trợ trình duyệt cũ?

Bạn có thể sử dụng PostCSS để tự động tạo ra các fallback cho các trình duyệt không hỗ trợ CSS Variables.

Kết luận

Việc từ bỏ file CSS riêng biệt cho Dark Mode không chỉ là một bước tiến về kỹ thuật mà còn thể hiện tư duy tối ưu hóa của một lập trình viên chuyên nghiệp. Bằng cách tận dụng CSS Variables và các kỹ thuật hiện đại, bạn sẽ tạo ra những sản phẩm web nhanh hơn, gọn gàng hơn và dễ bảo trì hơn. Hãy bắt đầu refactor dự án của bạn ngay hôm nay và đừng quên theo dõi hi_dev để cập nhật những kiến thức công nghệ chuyên sâu nhất.