Rút Gọn & Định Dạng CSS

Công Cụ Này Là Gì?

Một công cụ rút gọn CSS viết lại stylesheet để nhỏ nhất có thể mà không thay đổi cách nó hiển thị: loại bỏ chú thích và khoảng trắng, rút gọn giá trị màu và đơn vị bằng 0 khi an toàn, gộp các quy tắc trùng lặp, và loại bỏ dấu chấm phẩy thừa.

Công cụ này được xây trên clean-css, một trình tối ưu CSS thực sự phân tích stylesheet thành cây AST thay vì dùng regex, đó là lý do nó có thể xử lý an toàn các trường hợp đặc biệt khiến các công cụ rút gọn ngây thơ bị hỏng — custom property của CSS (--main-color: ...), nội dung bên trong chuỗi, và các selector cùng media query phức tạp đều ra kết quả đúng.

Tại Sao Nên Dùng?

• Rút gọn dựa trên AST (clean-css), không phải regex — an toàn với custom property, chuỗi và media query lồng nhau.
• Tối ưu hóa cấp độ 2 gộp và đơn giản hóa các quy tắc để tiết kiệm thêm ngoài việc loại bỏ khoảng trắng đơn thuần.
• Xem chính xác bạn đã tiết kiệm bao nhiêu byte và bao nhiêu phần trăm.
• Chế độ định dạng biến một stylesheet đã rút gọn trở lại thành CSS dễ đọc với thụt lề nhất quán.
• Xử lý 100% cục bộ — CSS độc quyền hoặc chưa công bố không bao giờ rời khỏi trình duyệt của bạn.

Cách Sử Dụng

1. Dán CSS của bạn vào ô nhập, hoặc nhấp "Tải Ví Dụ" để thử một mẫu có custom property và media query.
2. Nhấp "Rút Gọn" để nén, hoặc "Định Dạng" để làm đẹp với thụt lề 2 khoảng trắng.
3. Kiểm tra thông báo bên dưới các ô — chế độ rút gọn hiển thị mức giảm dung lượng; CSS không hợp lệ hiển thị thông báo lỗi rõ ràng thay vì âm thầm tạo ra kết quả hỏng.
4. Nhấp "Sao Chép" để lấy kết quả.

Ví dụ

Đầu vào

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Đầu ra

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Custom property, media query và thứ tự cascade đều được giữ nguyên — chỉ khoảng trắng, chú thích và ký tự thừa bị loại bỏ.

Mẹo thực tế

• Rút gọn ở thời điểm build/triển khai, không phải trong lúc phát triển — chỉnh sửa mã nguồn dễ đọc và để công cụ này (hoặc pipeline build của bạn) tạo ra phiên bản triển khai.
• Nếu bạn đang debug vì sao một trang trông khác trong production, định dạng lại CSS đã rút gọn trước sẽ giúp so sánh với mã nguồn dễ đọc hơn nhiều.
• Custom property vẫn giữ nguyên qua rút gọn, nên các stylesheet dựa trên design token (dùng --spacing, --color-*, v.v.) an toàn khi chạy qua công cụ này.
• Kết hợp với các công cụ rút gọn HTML và JS bên dưới nếu dự án của bạn giữ mọi thứ trong các file riêng trước khi phát hành.

Vị trí của công cụ này trong quy trình làm việc thực tế

CSS là một trong những thứ đáng rút gọn nhất vì stylesheet mặc định chặn quá trình hiển thị — mỗi byte cắt giảm từ một stylesheet có thể rút ngắn một chút thời gian hiển thị đầu tiên, đặc biệt trên kết nối chậm. Đây là một lợi ích nhỏ hơn so với tối ưu hóa ảnh, nhưng gần như miễn phí một khi đã được tích hợp vào bước build.

Chiều Định Dạng hữu ích cho vấn đề ngược lại: kiểm tra một stylesheet production của đối thủ hoặc một hệ thống cũ đã được triển khai dưới dạng rút gọn, để hiểu cấu trúc của nó trước khi viết ghi đè hoặc thiết kế lại.

→ Rút Gọn HTML · Rút Gọn JS

Các tình huống sử dụng phổ biến

• Thu nhỏ một stylesheet trước khi triển khai một trang tĩnh hoặc landing page.
• Định dạng lại một file CSS đã rút gọn lấy từ một trang web thực để nghiên cứu cấu trúc của nó.
• Dọn dẹp CSS xuất ra từ công cụ thiết kế, thường có quá nhiều chú thích và khoảng trắng.
• Kiểm tra nhanh xem một đoạn CSS viết tay có được phân tích đúng không, vì CSS bị lỗi sẽ hiện ra thành lỗi rõ ràng.

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