DEV Community

Automatically remove unused css from Bootstrap or other frameworks

Luke Lowrey on July 29, 2018

I love bootstrap (and other css frameworks). For a developer like me who often works on web projects without any design input it is a real lifesave...
Collapse
 
attacomsian profile image
Atta

It is a good tiny package but the problem is it does not search JavaScript files for CSS references. Sometimes there are some CSS classes which only apply via JavaScript e.g. Bootstrap dropdown toggler. Due to this, it broke one of my projects and I had to remove it to bring everything back to normal.

Collapse
 
ogrotten profile image
ogrotten

Also, after using this tool, rename your remaining classes from `#content-item-article-div.times-bold-450 to anything smaller to simplify everything else and, arguably, help performance.

Collapse
 
phild profile image
phild

This is perfect ! I was looking so long for something like this. Thank you a lot !

Collapse
 
ali4ever profile image
Ali Al Lawati デベロッパー

Nice
I really needed such thing a year back was creating an html form to run on microcontroller chip and had very limited storage that can't handle bootstrap css

Collapse
 
tripflex profile image
Myles McNamara

Exactly!

Collapse
 
plainjavascript profile image
plainJavaScript

Just use plain-vanilla CSS: It solves the whole problem...

Collapse
 
likebrain profile image
Ricardo Rivera • Edited

Hey, i dissagree here.
this sounds a bit polemical... ;)

You can have unused Plain-Vanilla CSS Classes also... this is the Problem that here Solved...

I think you Need multiple steps to solve a Size Issue in CSS...

  • Remove unused CSS Rules
  • Avoid Base64 Embedding ( a Base64-String has 120% size compared to RAW-Binary-Format)
  • Minify CSS
  • Compress

and so on...
you need to ensure that, no matter if Vanilla CSS or Framework CSS

Written on my phone ;)