Công cụ "Normalizer" CSS?

Question

Tôi cần duy trì & cải thiện trang web hiện tại và tôi đang chìm đắm trong dự phòng mà tôi đã phát hiện trong biểu định kiểu CSS của nó. Với sự tồn tại của các yếu tố dự phòng và phi phương pháp hiện tại, thật khó để theo dõi và dự đoán sự thay đổi nhỏ sẽ lan truyền như thế nào qua hệ thống, hoặc nơi áp dụng thay đổi để đạt được hiệu quả nhất định, mà không mất nhiều thời gian để học lại Tệp CSS và thử nghiệm.

Tôi đã sử dụng Firebug mới nhất và trình bổ sung "Nhà phát triển web" cho Firefox, nhưng rõ ràng chúng không đủ cho tôi. Tôi cần một công cụ có thể cho tôi biết nơi thừa "ghi đè" là và có lẽ đề xuất một chương trình xếp tầng tốt hơn.

Nói cách khác, hãy giúp tôi tạo tệp CSS ngắn nhất cung cấp cùng chức năng hình ảnh chính xác mà tôi có ngay bây giờ.

Để làm rõ thêm, tôi không tìm kiếm công cụ thay thế "# 000000" bằng "# 000", "0,5em" bằng ".5em", "trắng" bằng "#FFF", v.v. địa chỉ "số lượng ký tự" dư thừa, nhưng không giải quyết sự thừa "tầng tầng"). Ví dụ, tôi đang tìm kiếm một công cụ có thể cho tôi biết rằng thuộc tính "font-size: 10px" của phần tử con là thừa vì nó đã được thừa kế từ phần tử cha của nó.

Tính năng nâng cao hơn: thuộc tính "color: # 000000" của một lớp hoặc id là thừa vì nó không được sử dụng trong bất kỳ tệp HTML/PHP nào trên trang web.

Có công cụ thực hiện loại "bình thường hóa" này tự động không?

Answer 1

Đối với việc tìm kiếm trùng lặp/không sử dụng/CSS không cần thiết dựa trên đánh dấu của bạn, bạn có thể thử , hoặc Dust-Me Selectors (như @Aaron D đề cập), hoặc CSS Crunch. Hai phần cuối cùng là các phần mở rộng của trình duyệt (tương ứng với Firefox và IE), sẽ chỉ xem xét một trang, trong khi WARI có ý định xem toàn bộ một trang. Tuy nhiên, tôi không có nhiều may mắn để WARI hoạt động.

Answer 2

Bạn có thể thử YUI Compressor. Làm việc cho các tệp CSS và Javascript.

Answer 3

Bạn có thể dùng thử CSS Tidy (online version). Nó sẽ giảm dự phòng, tùy ý chuyển đổi sang phong cách viết tắt, và có thể được sử dụng để tạo ra đầu ra được rút gọn và đầu ra khá/định dạng.

Answer 4

Tôi không biết về một công cụ như vậy và nhìn vào sự phức tạp của CSS, tôi thậm chí không chắc chắn có thể giải quyết vấn đề này (một số kiểu CSS chỉ có để theo dõi các trình duyệt cũ hơn). Vậy một công cụ có giá trị bao nhiêu để tạo ra một CSS tuân thủ W3C mới mà không hiển thị trên hầu hết các trình duyệt do lỗi?

Điều đó nói rằng, bạn nên có một cái nhìn tại Envjs cho phép bạn đọc một trang web trong trình duyệt được mô phỏng và sau đó kiểm tra kết quả. Không hoàn hảo nhưng có thể giúp bạn bắt đầu.

Answer 5

Kiểm tra SASS, đây là trình biên dịch CSS có ngôn ngữ và cú pháp riêng, nhưng có khả năng nhập CSS. http://sass-lang.com/

Tôi tự hỏi, nếu chỉ một chu kỳ nhập/xuất sẽ thực hiện thủ thuật cho bạn?

Chỉnh sửa: Dường như chu trình xuất/nhập không đủ, nhưng SASS cung cấp cho bạn các tiện nghi giúp cuộc sống của bạn dễ dàng hơn trong khi tái cấu trúc.

Answer 6

Tôi nghĩ bạn đang tìm kiếm chén thánh của CSS. Tôi không nghĩ nó tồn tại. Vấn đề là bạn không bao giờ biết chính xác những gì trình duyệt sẽ hiển thị và cần trong biểu định kiểu của bạn. Tôi đã sử dụng plugin Dust-me Selectors cho Firefox để giúp định vị các kiểu không sử dụng, nhưng để tự động thực hiện nó là một tác vụ cao.

Điều đó nói rằng, tôi nghĩ rằng việc sử dụng một khung như SASS (như đã đề cập) hoặc LESS là một câu trả lời về câu hỏi của bạn.Các khung công tác loại bỏ rất nhiều sự dư thừa và làm cho CSS của bạn nhỏ gọn. Tôi thích LESS hơn SASS vì những điểm tương đồng với CSS.

Answer 7

Aaron làm cho một điểm tốt về sự phức tạp. Ví dụ, một công cụ như vậy sẽ cần truy cập vào không chỉ các tệp CSS, mà còn cả HTML (nó sẽ không thể xác định những thứ như thừa kế, nếu không). Sau đó, bạn có tìm kiếm nội dung nào đó sẽ thu thập toàn bộ trang web và đưa mọi trang vào tài khoản hay có thể cung cấp đánh dấu từ các tệp không? Nó cũng có khả năng là một công cụ như vậy sẽ sản xuất CSS mà ít bảo trì hơn một nhà thiết kế web phong nha sẽ sản xuất (Tôi đang nghĩ rằng các bộ chọn rút ngắn mà sau đó có thể chỉ cần được 'kéo dài lại' vào một ngày sau đó). Đó là không có vấn đề nếu đây chỉ là một hành động tạm thời, nhưng tôi tự hỏi tại sao bạn sẽ cần phải làm điều này ở nơi đầu tiên.