Bộ thu gọn CSS

Giới thiệu công cụ này

Vậy là bạn có một tệp CSS bắt đầu trông giống như một cuốn tiểu thuyết. Có thể nó đầy các bình luận, khoảng trắng thừa, hoặc những dòng bạn quên xóa. Nó vẫn hoạt động—ổn định—nhưng nó cồng kềnh. Làm chậm mọi thứ. Thật phiền phức, đúng không?

Đó là lúc một công cụ đơn giản hóa CSS (CSS minifier) xuất hiện. Đó không phải là phép màu, nhưng gần gũi như thế. Bạn dán đoạn CSS lộn xộn, dễ đọc của con người vào, và nó sẽ trả về một phiên bản gọn gàng, tối ưu hóa. Không có thừa thãi. Chỉ những gì trình duyệt thực sự cần. Nó loại bỏ khoảng trắng, xóa bình luận, rút gọn mã màu, và đôi khi thậm chí kết hợp các quy tắc. Tất cả mà không làm hỏng kiểu dáng của bạn.

Tôi đã sử dụng hàng chục công cụ như thế này trong nhiều năm qua. Hầu hết đều ổn. Một số thì cồng kềnh. Một vài thì thực sự khá tinh tế. Nhưng tất cả đều thực hiện cùng một nhiệm vụ cơ bản: làm cho CSS của bạn nhỏ hơn. Và nhỏ hơn thường có nghĩa là tải nhanh hơn. Điều mà, nói thật, chính là điều mà tất cả chúng ta mong muốn.

Tính năng nổi bật

Loại bỏ khoảng trắng và ngắt dòng không cần thiết—vì trình duyệt của bạn không quan tâm đến định dạng của bạn.
Xóa bỏ các bình luận. Đúng vậy, kể cả ghi chú bạn để lại cho chính mình vào năm 2019.
Rút gọn mã màu hex khi có thể—#ffffff trở thành #fff, vì sao phải gõ nhiều hơn mức cần thiết?
Kết hợp các bộ chọn và thuộc tính trùng lặp khi an toàn để làm như vậy.
Giữ nguyên chức năng. Bố cục của bạn sẽ không bị hỏng. (Hầu hết thời gian.)
Hoạt động ngay lập tức. Không cần đăng ký, không cần tải xuống. Chỉ cần dán và chạy.
Thường có tùy chọn “khôi phục” hoặc “làm đẹp”, trong trường hợp bạn cần đọc lại kết quả sau này.

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

Việc đơn giản hóa có làm hỏng trang web của tôi không?
Hiếm khi thôi. Hầu hết các công cụ đơn giản hóa đều cẩn thận. Nhưng nếu CSS của bạn chứa các "hack" kỳ quặc hoặc phụ thuộc vào định dạng cụ thể (như một số quy tắc @import), thì mọi thứ có thể bị lệch hướng. Luôn kiểm tra sau khi đơn giản hóa. Và hãy giữ bản sao lưu. Thực sự đấy.

Tôi có nên đơn giản hóa trong quá trình phát triển không?
Không. Hãy giữ tệp gốc của bạn sạch sẽ và dễ đọc trong khi bạn đang làm việc. Chỉ đơn giản hóa khi bạn sẵn sàng triển khai. Sử dụng source maps nếu bạn lo lắng về việc gỡ lỗi sau này.