Trình định dạng & rút gọn CSS

Cách dùng

1. 1 Dán CSS của bạn vào.
2. 2 Chọn Beautify để có kết quả thụt lề dễ đọc, hoặc Minify để loại bỏ khoảng trắng và comment.
3. 3 Sao chép hoặc tải kết quả về.

Vì sao dùng công cụ này

• Sử dụng thư viện js-beautify.
• Hỗ trợ cả hai chiều — làm đẹp CSS đã minify hoặc rút gọn CSS đã định dạng.
• Xử lý hoàn toàn phía client, không upload.
• Chế độ beautify mỗi selector một dòng cho ra kết quả thân thiện với git diff.

Câu hỏi thường gặp

Trình định dạng & rút gọn CSS là gì?

CSS Formatter là công cụ giúp làm đẹp (beautify) hoặc rút gọn (minify) các quy tắc CSS. Chế độ beautify thụt lề lại các selector, thuộc tính (property) và khai báo (declaration) thành một cấu trúc gọn gàng, dễ đọc, trong khi chế độ minify loại bỏ khoảng trắng và ngắt dòng để giảm kích thước file CSS. Công cụ chạy hoàn toàn trong trình duyệt, không cần đăng ký, không upload file lên máy chủ — mọi xử lý CSS diễn ra cục bộ ngay trên thiết bị của bạn.

Tính năng

Ví dụ

body{margin:0;color:#fff}

body {
  margin: 0;
  color: #fff;
}

Trường hợp sử dụng

1. 1

   Định dạng CSS đã nén

   Mở rộng một stylesheet đã bị minify để bạn có thể đọc và chỉnh sửa.

2. 2

   Áp dụng quy chuẩn chung

   Chuẩn hóa cách căn khoảng trắng và viết hoa/thường trong CSS của cả nhóm.

3. 3

   Thu gọn trước khi triển khai

   Nén một stylesheet để giảm số byte trên đường tải trang quan trọng (critical path).

Trình định dạng & rút gọn CSS so với các lựa chọn khác

Tài liệu tham khảo

• CSS Syntax Module Level 3 — W3C CSSWG
• js-beautify — công cụ làm đẹp mã cho HTML/CSS/JS — GitHub
• CSS: Cascading Style Sheets — MDN — MDN

Công cụ liên quan