uselesscss
v0.0.13
Published
Trim bloat from your CSS by only including rules that will actually be active.
Downloads
5
Maintainers
asimpletuneReadme
uselesscss 
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.
Install/Run
npm install uselesscss # you can add -g for a global install, available from the command lineUsage
You can use uselesscss through the command line interface or as a library
Command line interface
usage:
uselesscss [options] <html> ([-] | [<css>])
options:
-h --help Show this message
--version Print versionWhere <html> and <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.cssThe 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.cssLibrary
var Useless = require('uselesscss')
var reducedCss = Useless(html, css)Where html and css are strings.
Example results
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.cssThe resulting output is as follows:
| Framework | HTML | Original CSS | New CSS | Original size | New size | % reduction | |------------|------------------------------------------------------------|-------------------------------------------------------|-----------------------------------------------------------------------|---------------|----------|-------------| | Foundation | kitchen_sink.html | docs.css | docs.useless.css | 288KB | 84KB | 70% | | Bootstrap | bootswatch.html | bootstrap.css | bootstrap.useless.css | 146KB | 48KB | 67% |
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%!