Pico CSS – Framework CSS tối giản cho HTML ngữ nghĩa
(picocss.com)- Pico CSS tạo kiểu trực tiếp cho chính các thẻ HTML, từ đó giảm thiểu việc dùng class
- Mang lại trải nghiệm UI gọn gàng chỉ với CSS thuần, không cần thư viện ngoài hay JavaScript
- Tự động hỗ trợ giao diện phản hồi trên mọi thiết bị như di động
- Tự động áp dụng chế độ sáng/tối theo thiết lập môi trường của người dùng
- Có thể tùy biến linh hoạt với hơn 130 biến CSS, nhiều theme tùy chỉnh và component
Giới thiệu
Pico CSS là một framework CSS tối giản tối đa hóa sự gọn gàng và tính ngữ nghĩa. Nó tạo kiểu trực tiếp cho các phần tử ngữ nghĩa của HTML và giảm tổng số class xuống dưới 10, giúp mã dễ bảo trì và dễ đọc hơn. Framework cũng cung cấp phiên bản không dùng class, phù hợp với cả những người theo đuổi HTML thuần túy.
Các đặc điểm chính
Class-light & Semantic
- Áp dụng style trực tiếp lên các thẻ HTML, giúp giảm mạnh số lượng class CSS cần dùng
- Hỗ trợ cả phiên bản không class (class-less), mang lại sự tự do vượt ra ngoài cách tạo kiểu dựa trên từng mục
Chỉ CSS, Không phụ thuộc
- Hoạt động mà không cần thư viện ngoài, package manager hay JavaScript
- Chỉ với markup HTML cũng có thể dễ dàng tạo ra giao diện thanh lịch
Thiết kế phản hồi
- Cỡ chữ và khoảng cách được tự động điều chỉnh theo kích thước màn hình, mang lại trải nghiệm UI nhất quán và tinh tế trên mọi thiết bị
- Tự động thích ứng mà không cần thêm class hay cấu hình bổ sung
Tự động chuyển đổi chế độ sáng/tối
- Cung cấp sẵn theme sáng và theme tối
- Theme màu được áp dụng tự động theo thiết lập
prefers-color-schemecủa trình duyệt hoặc hệ điều hành - Được triển khai hoàn toàn bằng CSS mà không dùng JavaScript
Dễ tùy biến
- Cung cấp hơn 130 biến CSS để dễ dàng tùy chỉnh style
- Hỗ trợ tùy biến nâng cao bằng SASS
- Cung cấp 20 theme màu được thiết kế thủ công và hơn 30 component mô-đun, giúp dễ dàng mở rộng thành UI theo từng thương hiệu
Hiệu năng tối ưu
- HTML được giữ nhẹ và gọn, giảm overhead mã không cần thiết và mức sử dụng bộ nhớ
- Mang lại tốc độ tải nhanh mà không có sự trùng lặp CSS quá mức hay việc tải JS
Kết luận
Pico CSS mang đến phong cách UI ngữ nghĩa, phản hồi tốt và dễ tùy chỉnh mà không cần các phụ thuộc không cần thiết. Đây là lựa chọn lý tưởng cho môi trường phát triển linh hoạt, đồng thời là một framework hiệu quả cho các startup CNTT và lập trình viên.
2 bình luận
Tôi đã thấy cái này từ lâu rồi, giờ nó đã thay đổi khá nhiều so với khi đó.
Ý kiến trên Hacker News
Muốn giới thiệu trang này, đó là cssbed.com, nơi có thể dễ dàng chuyển đổi/xem trước các theme CSS không cần class
Tôi thật sự rất thích Pico. Gần như mọi side project tôi đều lấy nó làm điểm khởi đầu mặc định. Đôi khi tôi cũng dùng Neat nhỏ và nhẹ hơn (neat.joeldare.com)
Tôi chủ yếu dùng Tailwind CSS cho các dự án lớn, nhưng với các trường hợp nhỏ hơn và độc lập thì Pico CSS cực kỳ phù hợp. Trang về các kịch bản sử dụng của Pico CSS tóm tắt điều đó rất tốt. Tôi cũng chỉ mới phát hiện Pico CSS vào tuần trước, và nó là lựa chọn hoàn hảo cho một theme Hugo nhỏ (govanity, dùng để cung cấp vanity URL cho module/package Go: hugo-theme-govanity). Tôi tìm thấy Pico, đọc tài liệu và tích hợp xong chỉ trong hai giờ. Thêm một điểm nữa rất dễ bị bỏ qua: tận dụng biến CSS (css-variables) và màu sắc (colors)
Tôi cực kỳ cực kỳ thích Pico. Nó là một điểm khởi đầu tuyệt vời và có thể tùy biến dễ dàng theo nhiều hướng. Cảm giác hoàn toàn trái ngược với Tailwind
Tôi đang dùng Pico cho một dự án mới cùng với sinh mã bằng LLM. Vì LLM có xu hướng mặc định sinh ra Tailwind hoặc các kiểu style enterprise phức tạp, mẹo là đưa toàn bộ tài liệu Pico vào context và dùng prompt cụ thể (như CLAUDE.md) để hướng nó chỉ dùng Pico
Tôi đang dùng picocss cho website cá nhân của mình (g5t.de). Gần đây tôi chuyển sang plain html, và chỉ với vanilla js rất đơn giản cũng có thể nhanh chóng tạo header và footer chung cho mọi trang. Dù sao thì vẫn cần markup, nên tôi tự hỏi tại sao còn phải viết riêng thứ gì khác, thế là cứ viết thẳng bằng html. picocss còn có sẵn dark mode, nên cá nhân tôi càng thích hơn
Nút bấm và ô nhập liệu quá lớn so với các thành phần UI desktop truyền thống
CSS vốn dĩ nên được viết như thế này. Tôi không hiểu vì sao trong các tài liệu học lại cứ phải lặp cả ý nghĩa của phần tử vào tên class
Hoàn toàn đồng ý! Nhược điểm là nó chỉ dùng đơn vị pixel, chứ không dùng đơn vị vật lý+tương đối (pt/mm + em/ex/rem, v.v.). Dù vậy vẫn tốt hơn nhiều so với tailwind hay bootstrap
Tôi là fan cuồng của Pico… tôi vừa ra mắt trang chủ chính thức mới của raku.org bằng chính Pico