Lập trình kiểm tra xem tệp CSS có được sử dụng

Question

Có cách nào để viết kịch bản kiểm tra CSS không? Tôi chỉ cần thông tin cấp tệp, chứ không phải các quy tắc riêng lẻ. Có vẻ như trang phải thực sự kết xuất để có được thông tin chính xác ... vì vậy có lẽ một cái gì đó như Selenium có thể giúp đỡ?

Tôi đã nhìn thấy rằng có những plugin trình duyệt để kiểm toán các file CSS (ví dụ này StackOverflow question, A List Apart article này), nhưng kết quả tự rà soát cho mỗi trang sẽ mất quá nhiều thời

nền

Qua năm, các tệp CSS khác nhau đã được nhập vào tiêu đề mẫu của ứng dụng web của chúng tôi. Đó là một nỗi đau lớn cố gắng để tạo kiểu cho một phần tử khi có các quy tắc chồng chéo từ nhiều khung công tác, plugin, v.v.

Là một phần của nỗ lực hợp nhất/chuẩn hóa, tôi muốn di chuyển các tham chiếu cũ ra khỏi mẫu trang web và vào tiêu đề trang riêng lẻ, vì vậy các quy tắc của CSS sẽ bị giới hạn ở nơi chúng được sử dụng/cần thiết.

Tôi đang nghĩ điều đơn giản nhất là thu thập dữ liệu trang web và theo dõi các bản định kiểu CSS nào được sử dụng ở đâu.

CẬP NHẬT

trận đấu quy tắc không chủ định có thể xảy ra, vì vậy tôi bắt đầu nghĩ rằng tôi không thể kịch bản này. Có lẽ chúng ta sẽ phải đi từng trang một. Ngay cả khi đó, kiểu dáng của một số trang có thể dựa vào giao điểm lạ của bảng định kiểu đối lập: -/

Ngoài ra, tôi vẫn hoài nghi về các trình kiểm tra CSS tĩnh này, đặc biệt là với tệp mẫu. Quy tắc ul > li.special có thể không khớp với bất kỳ thứ gì cho đến thời gian chạy (các phần tử có thể được tạo phía máy chủ hoặc javascript)

Answer 1

Không có cách nào để kiểm tra xem bản thân tệp có được sử dụng hay không. Trình duyệt sẽ tải tất cả. Nhưng những gì bạn có thể làm là kiểm tra theo lập trình là một bộ chọn được sử dụng. Do đó, nếu mỗi tệp CSS của bạn có một quy tắc duy nhất, bạn có thể khai thác nó.

Trong mỗi tập tin thêm

UNIQUE_RULE::after { 
    content: ' '; 
    background: url(/track/?page=filename.css); 
} 

_{Lưu ý: tôi đã đề cập sử dụng quy tắc độc đáo, bởi vì phương pháp này không cho phép bạn kiểm tra ghi đè.}

Trình duyệt tải hình nền chỉ cho thẻ, tồn tại trong cây DOM. Để sử dụng tệp này, bạn cần sử dụng các quy tắc của nó. Sau đó, bạn sẽ cần phải thiết lập Selenium (hoặc thay thế của nó) để "nhấp" thông qua tất cả các trang của bạn.

Sau khi thử nghiệm của bạn đã chạy xong, bạn chỉ cần grep thông qua các bản ghi truy cập của bạn và tìm kiếm các thiếu/track/ yêu cầu tập tin. Và bạn có thể sử dụng phương pháp tương tự này để kiểm tra từng quy tắc CSS riêng lẻ (bằng cách tạo kịch bản để thêm ::after{ .. } vào mỗi quy tắc) cũng như không có thay đổi đối với thiết lập Selenium.

Nó sẽ đòi hỏi một số đầu tư thời gian, nhưng, khi bạn đã thiết lập tất cả, nó sẽ có thể tái sử dụng nó.

Không phải là giải pháp thanh lịch, nhưng hoàn toàn khả thi.