Có cách nào để tìm CSS không sử dụng trong một trang web không?

Question

Có cách nào để tìm CSS không sử dụng trong một trang web không?

Tôi đang cố gắng dọn dẹp một dự án mà tôi vừa kế thừa.

Answer 1

Dust-me Selectors là một plugin Firefox tìm thấy bộ chọn không sử dụng.

Answer 2

Tôi chỉ chạy vào này và nhớ đến câu hỏi của bạn: http://github.com/geuis/helium-css

Answer 3

Có quá nhiều đến nỗi có thể nói về các phương pháp thực hành tốt nhất cho CSS. Tôi sẽ cố gắng để dính vào các điểm chính.

Sử dụng đặt lại CSS.

Cố gắng xóa các câu lệnh CSS thực sự chung như h1 {} và #container em {}. Bạn nên sử dụng h1.section-title và #container em.important {}, vì cách đó nếu bạn chọn sử dụng h1 hoặc em một cách khác ở đâu đó trong tài liệu của mình, bạn không phải lo lắng về việc ghi đè bất kỳ mã hiện có nào.

Đừng quá cụ thể trong bộ chọn CSS nếu bạn không phải làm như vậy. Bạn thực sự chỉ cần có độ đặc hiệu cao nếu ở trong một phần cụ thể sẽ thay đổi cách hiển thị phần tử đó. Nếu không, để tạo mã cho lớp học có thể sử dụng lại block, #container .content .block ... của bạn có thể được giảm xuống còn .block ... trong nhiều trường hợp.

Tìm kiếm sự tương đồng trong CSS của bạn và xem liệu bạn có thể tạo các lớp có thể sử dụng lại hay không. Nếu bạn có các khối tương tự class="favorites" và class="popular", hãy biến nó thành class="block block-favorites" và class="block block-popular" và đặt các điểm tương đồng thành .block.

Nhận thói quen làm cho các khu vực trong CSS của bạn có chiều rộng tự động (có thể được thực hiện ngầm) để chúng phát triển đến chiều rộng của vùng chứa của bạn. Điều này làm cho việc di chuyển các phần từ phần hẹp trang web của bạn trở nên dễ dàng hơn đến phần lớn trang web của bạn mà không phải thay đổi bất kỳ mã nào.

Nhận xét mã của bạn và chia nhỏ mã thành các phần thường giúp mã dễ đọc hơn.

Bạn sẽ ngạc nhiên khi mã của bạn trông sạch hơn khi bạn triển khai bộ chọn CSS mạnh mẽ hơn. Hầu hết trong số đó là tương thích trình duyệt chéo (Internet   Explorer 7 trở lên).
Một số nguồn tài nguyên có giá trị: When can I use... - Quirks Mode on CSS Selectors - w3 on CSS Selectors

trả lời chuyển từ:
Best Practices for Cleaning up Existing CSS/unused styles

Answer 4

Chrome 59 đã được xây dựng trong màn hình bảo hiểm cho CSS và JavaScript kể từ 2017-04: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Bạn có thể bật nó bằng cách mở công cụ dev, sau đó chỉ huy cho tôi nu (Cmd+Shift+P trên máy Mac hoặc Ctrl+Shift+P trên Windows và Linux), sau đó nhập "hiển thị mức độ phù hợp".