Tái cấu trúc các tệp CSS lớn / cũ


13

Tôi hiện đang làm việc trên một trang web 100.000 trang, thiết kế hiện tại đã được thực hiện trong hơn 5 năm và các bản cập nhật liên tiếp đã dẫn đến bốn tệp CSS hơn 12.000 dòng.

Rõ ràng CSS đã trở nên khó sử dụng, nhiều kiểu được nhân đôi và gần như không thể biết có bao nhiêu kiểu đang thực sự được sử dụng.

Chúng tôi có thể giảm thiểu, nhưng điều này không thực sự giải quyết vấn đề, chỉ trì hoãn công việc lại không thể tránh khỏi.

Vì vậy, có ba câu hỏi có bất kỳ công cụ nào cho ...

  • khử các tập tin CSS lớn?
  • quét trang web và đăng nhập lớp CSS và ID sử dụng?
  • quét như vậy có thể đạt được với một kịch bản của một số loại, greasemonkey có thể?

Câu trả lời:


17

http://unuse-css.com/ Có một số điều bạn hỏi và họ có điều này để nói: -

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.

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.

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.