Tool nén và làm đẹp CSS

Nén CSS bỏ đi những gì

Tệp CSS bạn viết ra chứa nhiều thứ dành cho người đọc chứ không phải cho trình duyệt: dấu xuống dòng, thụt lề, khoảng trắng quanh dấu ngoặc, và chú thích giải thích. Trình duyệt bỏ qua toàn bộ những thứ đó khi dựng trang.

Nén là việc bỏ đúng những phần thừa ấy đi:

• Xoá mọi chú thích
• Gộp các dòng lại làm một
• Bỏ khoảng trắng quanh dấu ngoặc nhọn, dấu hai chấm và dấu chấm phẩy
• Bỏ dấu chấm phẩy cuối cùng trước dấu ngoặc đóng, vì nó không cần thiết
• Rút gọn mã màu khi viết ngắn lại vẫn cho ra đúng màu đó

Kết quả trông như một khối chữ liền, khó đọc với người nhưng trình duyệt hiểu y hệt bản gốc.

Nén giúp được bao nhiêu

Với tệp CSS viết tay có chú thích đầy đủ, mức giảm thường vào khoảng một phần tư tới một phần ba dung lượng. Nghe không nhiều, nhưng cần nhớ ba điều.

Thứ nhất, CSS là tài nguyên chặn hiển thị. Trình duyệt phải tải xong và đọc hiểu toàn bộ CSS rồi mới vẽ được trang. Chậm ở đây là màn hình trắng lâu hơn, không phải chỉ chậm ở đâu đó phía sau.

Thứ hai, tệp nhỏ hơn thì nén đường truyền cũng hiệu quả hơn. Máy chủ thường nén lần nữa trước khi gửi, và một tệp đã bỏ hết khoảng trắng cho kết quả tốt hơn.

Thứ ba, con số quan trọng nhất với mạng di động không phải dung lượng mà là số lần đi về. Tệp vừa đủ nhỏ để lọt vào ít gói dữ liệu hơn sẽ tới đích sớm hơn hẳn.

Làm đẹp CSS dùng khi nào

Chiều ngược lại cũng cần thường xuyên hơn bạn nghĩ:

• Bạn lấy được một tệp CSS đã nén từ một trang web và muốn hiểu nó viết gì
• Bạn nhận mã từ người khác với cách thụt lề lộn xộn, mỗi đoạn một kiểu
• Bạn dán mã từ nhiều nguồn vào một chỗ và muốn cả tệp trông thống nhất

Làm đẹp dàn lại mỗi thuộc tính một dòng, thụt lề đều nhau, tách các khối bằng dòng trống. Mã không đổi một chút nào về mặt tác dụng, chỉ dễ đọc hơn.

Vài chỗ dễ nhầm

Nén không phải là tối ưu. Nén bỏ ký tự thừa nhưng không biết luật nào trong tệp của bạn không còn chỗ nào dùng tới. Một tệp đầy luật thừa, sau khi nén vẫn đầy luật thừa, chỉ là viết liền hơn.

Đừng nén tệp bạn còn đang sửa. Hãy giữ bản gốc dễ đọc để làm việc, và chỉ nén ở bước cuối trước khi đưa lên máy chủ. Sửa trực tiếp trên bản đã nén là con đường ngắn nhất tới một lỗi khó tìm.

Chú thích bản quyền cũng bị xoá. Nếu bạn dùng thư viện yêu cầu giữ dòng ghi công ở đầu tệp, hãy dán lại dòng đó vào sau khi nén.

Công cụ liên quan

Cần đưa ảnh nền lên mạng để dùng trong CSS thì có Upload hình ảnh. Xem toàn bộ công cụ khác tại trang Công cụ.

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