Trực tuyến CSS DRYer (dedupe)

Question

DRY = "Không tự lặp lại".

Tôi có khung cơ bản css mà tôi sử dụng để xây dựng các thiết kế phức tạp hơn. Phương pháp tạo mẫu nhanh nhất chỉ là bắt đầu ở cuối và xây dựng css để có được kết quả mong muốn (thay vì chỉnh sửa các thuộc tính css hiện có từ css cơ bản).

Tuy nhiên, sau khi hoàn thành, có rất nhiều sự lặp lại của tên và thuộc tính.

Tôi đang tìm một công cụ trực tuyến (hoặc ngoại tuyến) sẽ quét tệp css của tôi và làm lại thông minh trong một biểu mẫu để loại bỏ sự thừa và sao chép.

Ví dụ, nếu hai dòng sau tồn tại trong một file CSS:

//FROM THE BASE CSS 
.header{ 
    font-weight:bold; 
    font-size:1.5em; 
    background:red; 
    margin:0 auto; 
    padding:20px 
    } 

//FROM THE ADDED CSS 
.header{ 
    font-weight:normal; 
    font-size:1.25em; 
    background:blue; 
    padding-bottom:0; 
    margin-top:-20px 
    } 

Các kết quả mong muốn (cho mục thấp hơn trong cascade là ưu tiên so với cũ) sẽ được loại bỏ trường hợp đầu tiên của .header chỉ thị và hợp nhất các quy tắc từ cả hai trường hợp .header thành một .header chỉ thị như vậy:

.header{ 
    font-weight:normal; 
    font-size:1.25em; 
    background:blue; 
    margin:-20px auto 0 auto; 
    padding:20px 20px 0 20px 
    } 

Ứng dụng này có tồn tại không?

Answer 1

Cá nhân, tôi sử dụng CSSTidy cho việc này. Nó thực hiện rất nhiều thứ, nhưng trong số những người khác nó kết hợp các bộ chọn nếu có thể và xếp đúng (loại bỏ các thuộc tính trùng lặp). Tôi thường giảm khoảng 30% kích thước tệp ban đầu, điều này gọn gàng và thậm chí khi được rút gọn, nó vẫn dễ đọc một cách hợp lý (không giống như bộ chỉnh sửa JavaScript).

Answer 2

Có một số công cụ để giúp với điều này, đây là hai tôi thấy có ích:

1. CSSTrashman
2. deadweight