Nén CSS

Dung lượng thực sự nằm ở đâu

Phần lớn dung lượng tiết kiệm được đến từ khoảng trắng và chú thích, mà trong một stylesheet viết tay thì rất nhiều — thụt lề, dòng trống giữa các quy tắc và các tiêu đề phân mục giúp điều hướng file lớn đều là phần thừa thuần túy khi đã đưa lên web. Ngoài ra, các giá trị được rút gọn theo những cách không thể làm thay đổi ý nghĩa: màu viết là #ffffff thành #fff, 0px thành 0 vì số không chẳng cần đơn vị, số 0 đứng đầu trong 0.5em bị bỏ, và margin: 10px 10px 10px 10px gộp lại thành margin: 10px.

Những gì cố ý không làm là nhóm thao tác rủi ro. Gộp các quy tắc có khai báo giống nhau, hoặc sắp xếp lại chúng, sẽ làm thay đổi cascade — và cascade là phần của CSS nơi hai quy tắc có cùng độ ưu tiên được phân định bằng việc quy tắc nào đứng sau. Một công cụ nén sắp xếp lại mạnh tay sẽ cho ra file nhỏ hơn và, trong một stylesheet lớn, một trang khác đi một cách khó nhận ra. Các khai báo trùng lặp cũng thường là cố ý, được giữ lại làm phương án dự phòng cho trình duyệt cũ bỏ qua khai báo thứ hai.

Quy tắc lồng nhau và cú pháp media range hiện đại bị từ chối thay vì được nén, và lý do đáng nói rõ vì nó ngược với cách hầu hết các công cụ khác làm. Trình phân tích đứng sau công cụ này ra đời trước cả hai tính năng, và khi gặp thứ nó không hiểu, nó không báo lỗi — nó lặng lẽ xóa đi, nên một khối lồng nhau đơn giản là biến mất khỏi kết quả và trang mất style mà không có gì báo lại. Từ chối file là câu trả lời trung thực. Nếu stylesheet của bạn dùng nesting gốc hoặc @media (400px <= width <= 700px), hãy dùng một trong các công cụ bên dưới.

Cũng như với HTML, hãy đánh giá kết quả sau khi nén gzip. Stylesheet được gửi đi dưới dạng nén gzip hoặc brotli, và các thuật toán này vốn đã xử lý khoảng trắng lặp lại cực kỳ tốt — nên một file giảm 30% khi nén mã có thể chỉ nhỏ đi 5% khi truyền đi. Phần tiết kiệm là có thật, và nhỏ hơn con số quảng cáo.

Khi bạn cần công cụ khác

Lightning CSS là công cụ phù hợp cho stylesheet hiện đại: nó hiểu nesting, media range, các hàm màu và mọi thứ khác được thêm vào trong vài năm gần đây, nén mạnh hơn bất kỳ công cụ cũ nào, và còn chuyển cú pháp mới về dạng cũ cho trình duyệt cũ trong cùng một lượt. esbuild --minify style.css gần như tốt bằng và cực kỳ nhanh. Cả hai đều nên nằm trong bước build thay vì trong một tab trình duyệt.

Cái lợi lớn hơn nhiều thường là xóa các quy tắc bạn không dùng. Một website xây dựng trên framework utility hoặc thư viện component thường gửi đi những stylesheet mà phần lớn file không khớp với bất kỳ thứ gì trên trang — và PurgeCSS, hoặc chính bước build của framework, sẽ cắt giảm con số đó đến cả chục lần. Nén CSS không dùng đến chỉ làm CSS không dùng đến nhỏ hơn; xóa nó đi mới là cách sửa thực sự.