Làm thế nào để xác định các định nghĩa css không sử dụng


414

Có cách tiếp cận tốt nào để giúp xác định các định nghĩa css không được sử dụng trong một dự án không? Một loạt các tập tin css đã được kéo vào và bây giờ tôi đang cố gắng dọn dẹp mọi thứ một chút.


Khi bạn nói "trong một dự án" - chính xác ý bạn là gì? Tùy thuộc vào môi trường bạn đang sử dụng, câu trả lời có thể khác nhau.
Ian Robinson


Tôi đã làm một công cụ làm một công việc khá tốt. Đây là Code Code
chập chững

Tôi đã viết một kịch bản có thể làm điều đó cho bạn: github.com/kgoedecke/unuse-css-parser
Kevin Goedecke 15/07/18

Câu trả lời:


145

Hãy xem tiện ích mở rộng Firefox Dust-Me tại https://addons.mozilla.org/en-US/firefox/addon/dust-me-selector/ .


14
Tiện ích mở rộng không hoạt động trong Firefox 4
mvark

5
Bản cập nhật này chưa bao giờ xuất hiện và sau khi hỏi trên các diễn đàn SitePoint, có vẻ như plugin này tốt như đã chết.
Mike B

3
Có vẻ như tác giả đã đăng một phiên bản cập nhật lên trang web của chính mình gần đây, thậm chí là một phiên bản cho Opera. Kiểm tra Brotherdding.com
Funka

2
Thật không may không còn hoạt động
Jonathan

4
Tôi đã viết một thay thế, thu thập dữ liệu nhiều trang trên trang web của bạn (theo các liên kết theo cách đệ quy): jitbit.com/un usedcss
Alex

259

Chrome Developer Tools có tab Kiểm toán có thể hiển thị các bộ chọn CSS không sử dụng.

Chạy kiểm toán, sau đó, trong Hiệu suất trang web, xem Xóa quy tắc CSS không sử dụng

nhập mô tả hình ảnh ở đây


64
điều đó thật tuyệt vời, nhưng quá tệ, bạn không thể chạy nó trên một nhóm các trang (nếu không các quy tắc CSS không được sử dụng có thể là không thể tránh khỏi)
Damon

17
Tôi chạy công cụ kiểm toán và nó cho tôi thấy css chưa sử dụng, nhưng làm thế nào để sử dụng nó? Tôi có phải tự tìm kiếm từng mục và loại bỏ nó không?
Timothée HENRY

19
Đây chỉ là trang hiện tại. Nó nói '2445 quy tắc (83%) CSS không được sử dụng bởi trang hiện tại', vì vậy không thực sự hữu ích.
chhantyal 2/2/2015

8
Khi bạn mở rộng mục, bạn sẽ nhận được một danh sách các quy tắc thực tế không được sử dụng. Mặc dù, nó không hữu ích trên các trang web mà bạn thay đổi DOM nhanh chóng.
Howie

10
Trên thực tế, điều này vừa được chuyển sang vùng phủ sóng - đi đến kiểm toán -> bên cạnh Bảng điều khiển ở phía dưới có một menu (menu kiểu 3 chấm dọc) và bạn có thể chọn vùng phủ sóng ở đó. Chỉ cần nhấp vào ghi và điều hướng.
Graham Ritchie

65

Tôi vừa tìm thấy trang web này - http://unuse-css.com/

Có vẻ tốt nhưng tôi sẽ cần kiểm tra kỹ css 'sạch' của nó trước khi tải nó lên bất kỳ trang web nào của tôi.

Ngoài ra, với tất cả các công cụ này, tôi sẽ cần kiểm tra xem nó không loại bỏ id và các lớp không có kiểu dáng nhưng được sử dụng làm bộ chọn JavaScript.

Nội dung dưới đây được lấy từ http://unuse-css.com/ để ghi có cho họ để đề xuất các giải pháp khác:

Latish Sehgal đã viết một ứng dụng windows để tìm và loại bỏ các lớp CSS không sử dụng. Tôi chưa thử nó nhưng từ mô tả, bạn phải cung cấp đường dẫn của tệp html và một tệp CSS. Chương trình sau đó sẽ liệt kê các bộ chọn CSS không sử dụng. Từ ảnh chụp màn hình, có vẻ như không có cách nào để xuất danh sách này hoặc tải xuống một tệp CSS sạch mới. Dường như dịch vụ được giới hạn trong một tệp CSS. Nếu bạn có nhiều tệp bạn muốn xóa, bạn phải xóa từng tệp một.

Dust-Me Selector là một tiện ích mở rộng của Firefox (dành cho v1.5 trở lên) tìm thấy các bộ chọn CSS không sử dụng. Nó trích xuất tất cả các bộ chọn từ tất cả các bảng định kiểu trên trang bạn đang xem, sau đó phân tích trang đó để xem bộ chọn nào không được sử dụng. Dữ liệu sau đó được lưu trữ để khi kiểm tra các trang tiếp theo, các bộ chọn có thể được gạch bỏ khỏi danh sách khi chúng gặp phải. Công cụ này được cho là có thể thu thập toàn bộ trang web nhưng tôi không may có thể làm cho nó hoạt động. Ngoài ra, tôi không tin rằng bạn có thể định cấu hình và tải xuống tệp CSS với các kiểu đã bị xóa.

Topstyle là một ứng dụng windows bao gồm một loạt các công cụ để chỉnh sửa CSS. Tôi chưa thử nghiệm nhiều nhưng có vẻ như nó có khả năng loại bỏ các bộ chọn CSS không sử dụng. Phần mềm này có giá 80 USD.

Liquidcity CSS cleaner là một tập lệnh php sử dụng các biểu thức thông thường để kiểm tra kiểu của một trang. Nó sẽ cho bạn biết các lớp không có sẵn trong mã HTML. Tôi chưa thử nghiệm giải pháp này.

Dead weight là một công cụ bảo hiểm CSS. Đưa ra một tập hợp các bảng định kiểu và một bộ URL, nó xác định các bộ chọn nào thực sự được sử dụng và các danh sách có thể được "xóa" một cách an toàn. Công cụ này là một mô-đun ruby ​​và sẽ chỉ hoạt động với trang web rails. Các bộ chọn không sử dụng phải được xóa thủ công khỏi tệp CSS.

Helium CSS là một công cụ javascript để khám phá CSS không được sử dụng trên nhiều trang trên một trang web. Trước tiên, bạn phải cài đặt tệp javascript vào trang bạn muốn kiểm tra. Sau đó, bạn phải gọi một chức năng helium để bắt đầu làm sạch.

Un usedCSS.com là ứng dụng web có giao diện dễ sử dụng. Nhập url của một trang web và bạn sẽ nhận được một danh sách các bộ chọn CSS. Đối với mỗi bộ chọn, một số cho biết số lần chọn được sử dụng. Dịch vụ này có một vài hạn chế. Câu lệnh @import không được hỗ trợ. Bạn không thể định cấu hình và tải xuống tệp CSS sạch mới.

CSSESS là một bookmarklet giúp bạn tìm các bộ chọn CSS không sử dụng trên bất kỳ trang web nào. Công cụ này khá dễ sử dụng nhưng nó sẽ không cho phép bạn định cấu hình và tải xuống các tệp CSS sạch. Nó sẽ chỉ liệt kê các tệp CSS không sử dụng.


5
chỉ là một lưu ý rằng không sử dụng-css.com không cho phép bạn tải xuống CSS mà không phải là thành viên trả phí và gói thấp nhất bắt đầu từ $ 29 một tháng! Có vẻ hơi đắt đối với dịch vụ đối với tôi
georgiecasey

1
Tôi sẽ thêm purifycss github.com/purifycss/purifycss vào hỗn hợp. Nó là miễn phí, khá phổ biến (theo các ngôi sao trong github) và hoạt động với các ứng dụng một trang.
Dmitry Gonchar

21

Tốc độ trang của Google có thể làm điều đó cho bạn (nó thực sự làm được nhiều hơn là chỉ cho bạn biết CSS nào không được sử dụng). Trên FireFox, nó có sẵn như là một tiện ích bổ sung FireBug. Sau đó, có một phiên bản trực tuyến.


8

Công cụ khai thác CSS tốt hơn trong C # loại bỏ các kiểu dư thừa;

Bạn cũng sẽ muốn sử dụng Dust-Me với điều này.

Hãy ghi nhớ, nếu có bất kỳ nội dung nào hiện không thể nhìn thấy đối với tôi, bạn có thể loại bỏ các kiểu bạn cần.

EDIT: liên kết đã bị hỏng nhưng archive.org có cả trang và mã.


7

Sử dụng CSS

Phần mở rộng Firebird để xem quy tắc CSS nào thực sự được sử dụng.

Sử dụng CSS là một tiện ích mở rộng cho Fireorms (do đó cần phải cài đặt Fireorms) cho phép bạn biết các quy tắc kiểu CSS không sử dụng. Nó xác định CSS bạn sử dụng và không sử dụng. Nó cho phép bạn chỉ ra những phần không cần thiết có thể được gỡ bỏ. Bạn chắc chắn nên sử dụng tiện ích bổ sung này để giữ cho các tệp CSS của bạn nhẹ nhất có thể.


6

Có vẻ như ai đó đã cập nhật Bộ chọn DustMe để hoạt động lại với Firefox dưới một tên mới - 'CSS Roundup' http://blog.brothersmorrison.com/?p=198


Tác giả có một phiên bản mới được đăng cách đây vài tuần trên trang web của mình, tại www.brotherdding.com
Funka

plugin này không còn khả dụng nữa và liên kết để tải xuống trên Brotherdding đã chết
Andrea Mauro


Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.