Công cụ rút gọn CSS

Rút gọn CSS là gì?

Công cụ rút gọn CSS nén stylesheet bằng CSSO, một bộ tối ưu theo cấu trúc. Ngoài việc xóa khoảng trắng và chú thích, nó rút ngắn giá trị (#ff0000 → red, 0px → 0), gộp các rule trùng lặp và xóa khai báo thừa ở những chỗ không thể làm thay đổi kết quả.

Cách sử dụng Rút gọn CSS

1. Dán CSS vào ô nhập.
2. Bấm Rút gọn (kết quả cũng cập nhật khi bạn gõ).
3. Xem dòng kích thước để biết mức tiết kiệm.
4. Sao chép hoặc tải xuống CSS đã rút gọn.

Ví dụ

a { color: #ff0000; margin: 0px 0px; } /* c */

a{color:red;margin:0}

Khi nào nên dùng Rút gọn CSS

Dùng cho bản build production của site nhỏ, khối <style> nội tuyến hoặc CSS lưu trong CMS. Nếu quy trình build đã dùng bundler với cssnano/lightningcss, hãy tiếp tục dùng nó. Hãy tự giữ lại chú thích giấy phép nếu giấy phép của bạn yêu cầu.

Rút gọn CSS hoạt động như thế nào

Trước tiên, một lượt quét nhanh kiểm tra dấu ngoặc nhọn, chuỗi và chú thích, báo các khối không cân bằng kèm vị trí. Sau đó CSS được đưa vào csso.minify với chế độ tái cấu trúc: CSSO phân tích thành AST (css-tree), áp dụng nén giá trị và gộp rule an toàn, rồi in kết quả không có khoảng trắng. Chú thích bị xóa, kể cả chú thích giấy phép /*! … */.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Rút gọn một stylesheet độc lập cho landing page
• ✓ Thu nhỏ critical CSS trước khi nhúng nội tuyến
• ✓ Nén CSS lưu trong cơ sở dữ liệu hoặc CMS
• ✓ So sánh kích thước sau tối ưu với bản gốc

Câu Hỏi Thường Gặp

Bước tiếp theo nên làm

Khám phá thêm danh mục