Sumi.css: Framework CSS tối giản, chỉ 6,7 KB và không cần viết class

Trong thế giới front-end vốn ngày càng phình to bởi các bộ công cụ build phức tạp, một framework CSS mới xuất hiện trên Hacker News đang thu hút sự chú ý nhờ triết lý ngược dòng: càng ít class càng tốt. Sumi.css của tác giả Vladimir Carrer hướng tới việc để lập trình viên viết HTML thuần ngữ nghĩa, còn phần giao diện cứ để framework lo.

Sumi.css - framework CSS tối giản

Một file duy nhất, không cần build

Điểm mạnh đầu tiên của Sumi.css là sự gọn nhẹ: chỉ 6,7 KB sau khi minify và gzip, không có JavaScript, không có dependency. Người dùng chỉ cần tải file sumi.min.css, nhúng vào dự án hoặc nạp qua jsDelivr là xong, không cần bất kỳ bước build nào.

Triết lý cốt lõi là classless-first: các thành phần như tiêu đề, form, bảng, card, accordion, modal hay thanh điều hướng đều được định dạng chỉ từ thẻ HTML. Bạn chỉ thêm class khi thực sự muốn một biến thể cụ thể. Với những ai từng mệt mỏi vì phải rải hàng chục utility class khắp file markup, đây là một hướng tiếp cận đáng thử.

Sáng tối tự động và tùy biến sâu

Sumi.css tự động theo cài đặt hệ thống của người xem, đồng thời cho phép ép chế độ sáng hoặc tối thông qua thuộc tính data-theme. Điều này đặc biệt hữu ích với các sản phẩm web phục vụ người dùng Việt Nam, nơi thói quen dùng dark mode đang tăng nhanh trên cả desktop lẫn mobile.

Mọi quyết định thiết kế đều được biểu diễn bằng CSS custom property với tiền tố --s-, từ màu sắc, font chữ, kích thước đến bán kính bo góc. Muốn đổi màu chủ đạo hay font tiêu đề, bạn chỉ cần khai báo lại vài biến trong stylesheet nạp sau Sumi. Các token còn có thể áp dụng riêng cho một phần tử, cho phép từng khu vực trên trang mang phong cách khác nhau.

Một chi tiết kỹ thuật đáng chú ý: các style cho element được bọc trong :where(), tức độ ưu tiên bằng 0, nên CSS riêng của bạn luôn thắng mà không cần !important. Đây là điểm cộng lớn so với nhiều framework khác, vốn thường gây khó chịu khi phải ghi đè style.

Khả năng truy cập và hệ sinh thái đi kèm

Sumi.css chú trọng khả năng truy cập với vòng focus rõ ràng, hỗ trợ các trạng thái dựa trên ARIA như aria-invalid, aria-busy, aria-current, cùng việc tôn trọng cài đặt giảm chuyển động của người dùng. Ngoài file CSS, dự án còn cung cấp docs.html liệt kê toàn bộ component kèm mã HTML, công tắc sáng/tối và trình chỉnh token trực tiếp, cùng tutorial.html hướng dẫn từng bước dựng trang.

"Viết HTML thuần ngữ nghĩa và nó trông đã hoàn chỉnh. Chỉ thêm class khi bạn muốn một điều gì đó cụ thể." — mô tả của tác giả về Sumi.css.

Framework yêu cầu các phiên bản trình duyệt hiện hành của Chrome, Edge, Firefox và Safari, do sử dụng các tính năng hiện đại như :where(), :has() và color-mix(). Trên trình duyệt cũ, trang vẫn hiển thị được nhưng màu hover và focus sẽ đơn giản hơn. Dự án phát hành theo giấy phép MIT, phù hợp cho cả dự án cá nhân lẫn thương mại.

Góc nhìn cho lập trình viên Việt Nam

Với các nhóm phát triển web tại Việt Nam thường xuyên làm landing page, trang tài liệu nội bộ hoặc blog cá nhân, Sumi.css là lựa chọn nhẹ và nhanh để có giao diện chỉn chu mà không phải kéo theo cả hệ sinh thái build. Tuy nhiên, framework này không nhằm thay thế các giải pháp component-heavy cho ứng dụng lớn; nó phù hợp nhất với những trang cần sự đơn giản, tốc độ tải và khả năng bảo trì lâu dài.