Làm cách nào để tối ưu hóa biểu định kiểu bằng cách xóa các bộ chọn CSS không cần so sánh và/hoặc không cần thiết

Question

Tôi đã thừa hưởng một biểu định kiểu lớn với hàng nghìn bộ chọn và tôi chắc chắn rằng một số lượng tốt chúng không cần thiết và không bao giờ khớp các phần tử trên trang web. Vì lợi ích của việc tối ưu hóa, tôi muốn xóa những bộ chọn/quy tắc mồ côi.

Có bất kỳ công cụ nào có thể cho phép tôi so sánh CSS với toàn bộ trang web để xác định bộ chọn nào được yêu cầu và bộ lọc nào không?

Trang web có các thành phần AJAX, vì vậy hãy viết một tập lệnh curl/wget để duyệt qua trang web và sau đó lặp qua từng bộ chọn và grep cho một kết quả không khả thi (mặc dù điều đó thật thú vị ...)

Tất cả đề xuất đều được hoan nghênh.

Cảm ơn, JD

Answer 1

Có một plugin của Firefox có tên là "Bộ chọn xóa bụi".

https://addons.mozilla.org/en-US/firefox/addon/5392/

"Nó trích xuất toàn bộ selectors từ tất cả các stylesheets trên trang bạn đang xem, sau đó phân tích trang đó để xem ai trong số những selectors không được sử dụng. Các dữ liệu sau đó được lưu trữ để khi thử nghiệm các trang tiếp theo, bộ chọn có thể bị gạch chéo khỏi danh sách khi chúng gặp phải. "

Đó là một quy trình khá thủ công nhưng có thể là những gì bạn đang tìm kiếm.

Answer 2

Bạn có thể thử một trong những tối ưu trên mạng, như thế này:

http://www.cleancss.com/

Các Robson nén dường như không được công việc tốt nhất của việc kết hợp và loại bỏ selectors dư thừa.

http://iceyboard.no-ip.org/projects/css_compressor

Một số tối ưu ảnh trực tuyến có khả năng loại bỏ bộ chọn không sử dụng.

Answer 3

kiểm tra CSS Bảo hiểm (một phần mở rộng cho Firebug) http://perishablepress.com/press/2010/06/21/how-to-micro-optimize-your-css/

Theo tôi tốt hơn so với bụi-me selectcor