Các đoạn mã CSS hiện đại: đừng viết CSS như năm 2015 nữa

• Bộ sưu tập mã nguồn so sánh song song giữa các kỹ thuật hack CSS đã cũ và cú pháp CSS native hiện đại thay thế chúng
• Tận dụng các tiêu chuẩn mới như Grid, Flexbox, màu OKLCH, container query, scroll-timeline để giảm phụ thuộc vào JavaScript
• Được phân chia theo từng chủ đề như màu sắc, bố cục, hoạt ảnh, selector, typography, workflow, qua đó đưa ra các phương án thay thế hiện đại cho từng tính năng
• Với các tiêu chuẩn CSS mới nhất, có thể giảm phụ thuộc vào JS, Sass, thư viện bên ngoài và tận dụng tối đa các tính năng native của trình duyệt

[GN⁺]

Ý kiến trên Hacker News

• CSS của năm 2025 nghe như thể quay lại thời style inline kiểu 2005 và viết thẳng vào HTML
  Đang nói về Tailwind, nhưng rốt cuộc cũng là bỏ qua việc tách biệt giữa định dạng và trình bày

  • Huyền thoại lâu đời nhất trong phát triển web là khái niệm “tách biệt mối quan tâm”
  • HTML và CSS chỉ là sự tách biệt về mặt công nghệ
    Nếu HTML thật sự chỉ lo nội dung và CSS thật sự chỉ lo style, thì đã chẳng cần tạo ra thứ div soup như .container-wrapper .container .container-inner
    Việc cứ mỗi lần đổi layout lại phải sửa HTML chính là bằng chứng
  • Không cần làm mã khó đọc, cứ dùng Tailwind là được
  • Tôi còn thấy như vậy tốt hơn
    Mã liên quan đến component nằm cùng một chỗ nên không phải nhảy qua lại giữa nhiều file
  • Tôi nghĩ đó là một ý tưởng hay
    Layout và style là phần UI không thể tách rời
    HTML không phải là nội dung mà là layout
    Dù có tin vào việc tách biệt mối quan tâm đi nữa thì HTML và CSS vẫn thuộc cùng một tầng trình bày
    Tin rằng có thể tách hai thứ này hoàn toàn chẳng khác nào phớt lờ thực tế

• Tôi đã tổng hợp danh sách những cải tiến chính gần đây của CSS

  1. nested selectors
  2. :has(...)
  3. :is(...) — trước đây phải dùng mẹo kiểu :not(:not(...))
  4. :where(...) — giống :is(...) nhưng độ ưu tiên selector bằng 0, hữu ích khi viết selector phức tạp
  • Rất đồng ý với #1
    Phần lớn LLM không biết tính năng này
    Khuyên nên thêm ví dụ vào AGENTS.md
    Nên tham khảo tài liệu MDN về Nesting Selector
    Có thể tận dụng selector & để vừa tăng khả năng đọc vừa giảm lặp lại
  • Thứ tôi thích nhất là text-box: trim
    Cảm giác thật giải phóng khi thời phải giải thích với designer suốt 20 năm rằng không thể căn đỉnh chữ in hoa đã kết thúc
  • Cá nhân tôi thích tính năng @layer nhất
  • Từ 2 đến 4 thì ổn, nhưng tôi ghét nested selectors vì không grep được

• Một số ví dụ dùng cách cũ thì chạy được trên mọi trình duyệt, còn cách mới chỉ chạy trên Chrome/Edge
  Tôi nghĩ đưa những ví dụ như vậy vào là thiếu trách nhiệm vì càng củng cố thế độc quyền của Blink

  • Đồng ý. Sẽ tốt hơn nếu bộ lọc mặc định là “newly available” và bao gồm đủ ba trình duyệt lớn (Chrome/Edge, Safari, Firefox)
  • Không phải lỗi của trang web
    Đúng hơn nên chỉ ra việc Mozilla chưa tuân thủ chuẩn tốt hơn

• Nên ngừng ghim các phần tử vào mép màn hình
  Một số trang để hơn nửa màn hình bị chiếm bởi các phần tử tĩnh
  Để nội dung được cuộn vẫn tự nhiên hơn

• Trớ trêu là chính trang đó lại khóa cứng dark mode và không dùng prefers-color-scheme

• Nhiều khi thấy “ví dụ CSS sáng tạo hay quá!”, nhưng rồi hỗ trợ trình duyệt chỉ ở mức 40~50% nên có giới hạn rất thực tế

  • Trước đây việc hỗ trợ kém như vậy là vấn đề lớn, nhưng giờ đã khá hơn nhiều
    Dù một phần là nhờ ảnh hưởng quá lớn của Chromium, nhưng kết quả nhìn chung vẫn tích cực
    Tham khảo Interop 2025
  • Nếu đổi bộ lọc ví dụ sang “widely available” thì tỷ lệ hỗ trợ sẽ cao hơn hẳn
  • Chỉ là cần thời gian thôi
    Các vendor trình duyệt đang thêm sẵn tính năng để rồi sau này đạt được mức hỗ trợ rộng rãi

• Những ví dụ bị đánh dấu là không chạy trên Firefox lại hoạt động bình thường trong demo thực tế nên khá khó hiểu
  Tôi tự hỏi liệu có dùng polyfill hay không

  • Đó là nhãn “Limited availability”
    Phần trăm màu xanh ở góc dưới bên trái là tỷ lệ người dùng trình duyệt hỗ trợ tính năng đó
    Nhiều trường hợp còn dưới một nửa
    Rốt cuộc nó giống “modern CSS” ít hơn và gần với “CSS mới nhất của Chrome” hơn
  • Việc gắn nhãn hỗ trợ tính năng khá lộn xộn
    Ví dụ sibling-index() vẫn chưa chạy trên Firefox nhưng lại được đánh dấu là “widely available”

• Dạo này tôi thấy bối rối không biết nên dùng Tailwind, CSS-in-JS, Sass/SCSS hay Vanilla CSS

  • Không có đáp án đúng duy nhất
    Cứ dùng thứ phù hợp với team là được
    Nếu Tailwind hợp thì dùng nó, nếu là dự án cá nhân thì CSS inline, nếu đã quen Sass thì cứ tiếp tục,
    còn nếu muốn all-in với CSS hiện đại thì đó cũng là một lựa chọn rất tuyệt

• Tôi làm web quá lâu rồi nên ngay cả những ví dụ bị gọi là “kiểu cũ” cũng có nhiều tính năng là lần đầu tôi thấy

• Đây là lần đầu tôi thấy tính năng điều chỉnh độ sáng màu
  Trước đây tôi làm bằng Sass và Compass, nhưng việc bảo trì toolchain khá phiền phức
  Giờ CSS tự hỗ trợ rồi nên tiện hơn nhiều