Làm thế nào để đi về các vấn đề CSS không sử dụng

Tôi đang chạy một số speedtests trên blog và tôi luôn nhận được khiếu nại về CSS không sử dụng. Nhưng đây không phải là CSS mà tôi không bao giờ sử dụng, nó chỉ không được sử dụng trên trang cụ thể đó.

Bây giờ tôi làm việc theo cách có cấu trúc, nhưng vẫn phải có một số CSS trong tệp sẽ không được sử dụng, vì bạn cần nó trên một trang khác.

Tôi không nghĩ rằng việc sử dụng các tệp CSS khác nhau trên các trang khác nhau là cách tốt nhất, tôi nghĩ bạn sẽ tốt hơn nhiều nếu chỉ tạo một tệp lớn có thể được lưu trong bộ nhớ cache.

Bây giờ có một cách thanh lịch để đối phó với điều này, hoặc bạn chỉ cần gắn bó với nó.

Bạn khẳng định rằng bạn tốt hơn với một, tệp CSS lớn hơn là chính xác. Nó có thể sẽ chỉ là một vài KB khi được nén, và nên được lưu vào bộ nhớ cache, do đó không phải là một chi phí quá lớn. Có một vài điều đáng để kiểm tra mặc dù.

Nếu một số CSS chỉ được sử dụng trên một trang, thì trong trường hợp đó có thể tốt hơn để đặt CSS trên trang, trong một số thẻ kiểu. (Lưu ý: điều này có thể khiến mọi thứ khó bảo trì, đặc biệt là khi bạn quyết định sử dụng một kiểu tương tự ở nơi khác.)

Nếu bạn lấy các trang phổ biến nhất của mình (ví dụ: các trang chiếm 50% số lượt xem trang của bạn) và thấy rằng chỉ một lượng rất nhỏ CSS của bạn đang được sử dụng trên các trang đó, người dùng có thể chia nó thành nhanh hơn hai tệp CSS. Bây giờ, người dùng mới truy cập các trang phổ biến nhất của bạn có ít hơn để tải xuống. Trên các trang khác có thêm một yêu cầu HTTP nhưng đó không phải là vấn đề lớn.

Hãy chắc chắn rằng CSS của bạn được tối ưu hóa tốt. Tránh chọn lọc hậu duệ nếu có thể. Nếu phía bên phải của bộ chọn quá chung chung thì nó có thể làm chậm thời gian kết xuất. Ví dụ, .class div {}sẽ hơi chậm vì trình duyệt phải kiểm tra mọi <div>phần tử trên trang, sau đó tra cây DOM lên trên cùng để tìm (hoặc không) một phần tử với lớp.

Tôi nghĩ rằng đây là một thiếu sót của công cụ speedtest mà bạn đang sử dụng, nó không nhìn vào toàn bộ trang web và xem CSS nào không bao giờ được sử dụng. Nếu bạn có thể tìm thấy một công cụ nào, hãy cho chúng tôi biết!

Tôi nghĩ rằng bạn tốt hơn nhiều chỉ cần tạo một tệp lớn có thể được lưu trữ.

Vâng, điều đó có ý nghĩa, trừ khi có một tập hợp các trang cần thêm một chút CSS trong trường hợp bạn có thể đưa nó vào đó.

Có một trình cắm Firefox nhỏ tiện dụng có tên là Dust-Me Selector , kiểm tra CSS của bạn và báo cáo mọi quy tắc không sử dụng. Tuy nhiên, nó không hoạt động với phiên bản Firefox mới nhất (v8.0), điều này hơi xấu hổ.

Tái bút: Nếu tôi là bạn, tôi sẽ dùng CSS Lint với một nhúm muối - có một trường phái cho rằng các khuyến nghị của nó về vấn đề này là phạm pháp, và hoàn toàn quá mức cần thiết. (Để cụ thể hơn, xem bài viết có sức thuyết phục Matt Wilcox của, “ CSS Lint là có hại ” ). Tốt nhất, nó hoàn toàn không chính thức và, hãy đối mặt với nó, chúng ta có thực sự cần một công cụ / tiêu chuẩn giả khác để đáp ứng không?

Cách tối ưu hóa và có thể mở rộng nhất mà tôi có thể tưởng tượng để đối phó với điều này bao gồm:

1. Tạo một tệp CSS chính cho mọi thứ liên quan đến "phạm vi toàn cầu" (chẳng hạn như thiết kế của trang web, các lớp toàn cầu, thư viện, plugin, v.v.).

2. Tạo một hệ thống liên quan đến một thư mục chứa một tệp CSS duy nhất trên mỗi trang (chỉ khi cần thiết). Các tệp này có thể có cùng tên tệp với trang được liên kết để bạn có thể chạy tập lệnh phía máy chủ trên mỗi trang tìm tệp CSS trong thư mục đó và thêm trang đó nếu có.

3. Có thể, tạo các tệp CSS khác nhau cho nội dung cụ thể của trình duyệt mà bạn chỉ tải khi khách truy cập có trình duyệt tương đối.

Bằng cách đó, bạn sẽ có một cách riêng biệt và tối ưu hóa để tách CSS của bạn. Đúng, vẫn sẽ có các quy tắc không được sử dụng trong tệp chính nhưng chúng sẽ là nơi chúng được cho là theo quan điểm logic.

Ngoài ra, hãy nhớ rằng 3 "lớp" tệp CSS đó sẽ được lưu vào bộ đệm như là một tệp CSS.