Remove redundant CSS properties between 2 or more CSS files

Question

I have 2 CSS files that have redundant CSS properties set between them.

For example, in foo.css:

#test {
    border: 0;
    font-size: 16px;
}

in bar.css:

#test {
    border: 0;
    font-size: 32px;
    width: auto;
}

With this, I'd want to remove border: 0; from bar.css.

I expected to easily find an answer to this in an existing question, but for the life of me I couldn't find anything. There must be some quick tool to do process 2 or more files?

Answer 1

There's an add-on for Firefox called Dust-Me Selectors which scans the stylesheets on a page and gives you a list of the ones which are used and aren't used.

This can be useful for detecting which styles you can safely get rid of. (though you do still need to put some intelligence into it, as there might be some styles which show up as unused but are used dynamically, etc)

Answer 2

chrome's extensions !

https://chrome.google.com/webstore/search/remove%20unused%20css?utm_source=chrome-ntp-icon

I hope it is usefull for you

Answer 3

Use this tool: github.com/ruilisi/css-checker.

It can automatically detect your similar CSS classes and show the diff between them. It can also parse your HTML or js files and find unused css classes.

To Install:

Using Go

go install github.com/ruilisi/css-checker@latest

(With go version before 1.17, use go get github.com/ruilisi/css-checker). Or download from releases

Using npm

npm install -g css-checker-kit

To Run

• cd PROJECT_WITH_CSS_FILES and just run:

css-checker