Định dạng & nén CSS
Làm đẹp CSS để dễ đọc hoặc nén lại trước khi phát hành
Về công cụ này
Bung phần CSS đã nén hoặc chép vội ở đâu đó về dạng mỗi dòng một khai báo, hoặc ép cả stylesheet lại cho môi trường production. Bộ làm đẹp chuẩn hóa thụt lề và vị trí dấu ngoặc nhọn; bộ nén thì bỏ chú thích, gom khoảng trắng và bỏ dấu chấm phẩy cuối cùng, trong khi vẫn để nguyên các chuỗi, phần nội dung trong url(...) và biểu thức calc().
Bộ nén rất sòng phẳng về những gì nó không làm: nó không đổi tên bộ chọn, không gộp các quy tắc trùng lặp, cũng không viết lại mã màu. Nhờ vậy kết quả dễ đoán và an toàn với mọi stylesheet, kể cả những tệp đầy mẹo vặt và tiền tố nhà cung cấp — dán vào, nén, rồi đưa lên.
Cũng như mọi công cụ ở đây, việc xử lý diễn ra cục bộ. Mã của một design system chưa công bố vẫn nằm trong trình duyệt của bạn.
Câu hỏi thường gặp
- CSS sau khi nén nhỏ đi bao nhiêu?
- Với CSS viết tay thì thường là 15–30%, phần lớn đến từ thụt lề và chú thích. Gzip trên máy chủ vốn đã loại bỏ phần lớn sự dư thừa đó, nên chênh lệch dung lượng truyền đi nhỏ hơn con số byte thô gợi ra — nhưng cứ nén, vì nó còn rút ngắn thời gian phân tích cú pháp.
- Có an toàn với calc(), thuộc tính tùy chỉnh và media query không?
- Có. Khoảng trắng bên trong calc() mang ý nghĩa và được giữ nguyên; các thuộc tính tùy chỉnh cùng những tham chiếu var() chỉ là khai báo bình thường nên còn nguyên vẹn; @media và các at-rule khác vẫn giữ cấu trúc.
- Vì sao bộ chọn hậu duệ vẫn giữ khoảng trắng?
- Vì “nav a” và “nava” chọn hai thứ khác nhau — dấu cách đó là một toán tử kết hợp chứ không phải chuyện trình bày. Bộ nén chỉ bỏ đi những khoảng trắng không mang ý nghĩa cú pháp.
- Nó chuyển đổi được giữa LESS/SCSS và CSS không?
- Không — cú pháp tiền xử lý cần được biên dịch chứ không phải định dạng. Phần SCSS thuần vốn cũng là CSS hợp lệ thì định dạng tốt; còn quy tắc lồng nhau và mixin thì không.