Trim bloat from your CSS by only including rules that will actually be active.
The goal behind this project is to speed up websites and make for cleaner resulting code by only including what you need. A perfect use case, for example, would be if you were using a large framework, like Bootstrap, in combination with a static site generator, like Jekyll.
npm install uselesscss # you can add -g for a global install, available from the command line
You can use uselesscss through the command line interface or as a library
Command line interface
usage:uselesscss [options] <html>options:-h --help Show this message--version Print version
<css> are local paths to their respective files. Also, you can supply
- instead of a
<css>, to pass in STDIN or pipe in output from another program.
To save the resulting output, redirect it to a file. E.g.
./bin/uselesscss ~/index.html ~/Developer/my-site/big.css > ~/small.useless.css
The pipe syntax (i.e.
-) is useful when used with a build pipeline or want to pass in a remote file. E.g.
curl -L https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css | ./bin/uselesscss ~/index.html - > bootstrap.useless.css
var Useless =var reducedCss =
css are strings.
The following examples can be found in the example section of this project. They can be generated easily by running
./bin/uselesscss example/foundation/kitchen_sink.html example/foundation/css/docs.css > example/foundation/css/docs.useless.css./bin/uselesscss example/bootstrap/bootswatch.html example/bootstrap/css/bootstrap.css > example/bootstrap/css/bootstrap.useless.css
The resulting output is as follows:
|Framework||HTML||Original CSS||New CSS||Original size||New size||% reduction|
The above examples were chosen because their original intent is to demonstrate the full capabilities of their respective frameworks. Still, we see pretty good file size reductions. For more realistic projects, such as my personal site, which make much more sparse use of such frameworks, the reduction is closer to 97%!