How To Remove unused CSS rules [closed]

Question

EDIT: While my specific issue is due / relating to the Twitter Bootstrap system, the solution I am looking for does not need to be Twitter Bootstrap specific, but more a solution for any CSS style sheets.

I am starting to explore the world of Twitter Bootstrap for a current project I'm working on. I am using Bootstrap 3.3.6

The Issue (why I have the problem below)

The basic Bootstrap CSS file is 6760 lines, as well as additional files for adding my own custom CSS to the site. In total this gives that the site for each page loads ~8700 lines of CSS (unminified).

But the rules applied to the website use only ~700 of these lines. That's a massive overhead for each page, and even with minifying the CSS into the .min.css format this is still a huge percentage overhead.

I am looking for a way of reducing this overhead without removing any of the used rules from the CSS files.

What I've tried (And why it didn't work or is impractical)

I have previously used with great success the Firefox Dust-Me CSS refiner which can identify all unused CSS rules in a page, or even on a whole site.

This is the sort of thing I want, but it has two serious drawbacks:

• It only retains CSS rules that are used on the page for the device/media that is used (so for example, it tells me that all the rules in the IE10 viewport bug workaround CSS file are not used because I'm using Firefox browser rather than IE10). It also does not take into account media query specific rules.

• The other main drawback for using Dust-Me (specifically, but other similar programs I've found have a similar shortfalls) is that while it will tell me which rules are not used, it doesn't give me an ability to copy/paste the used CSS from the source files.

I have also looked into a few other CSS spare rule removers and the Google Chrome Developers Audit which is useful, but does the same thing, listing in text format the unused rules, which is barely half the job I am looking for.

The Problem (Why I need your help to solve this)

So I am in a position I have a Google Chrome Audit that tells me that 88% of bootstrap.css and 65% of bootstrap-theme.css are unused. These unused elements are listed in text format, and there are hundreds of them. currently I can only see that I would need to do find/replace on each one, removing them [the rule identifiers] from the source before then going through the CSS file and removing all the commands that no longer have any rules.

So I am asking this:

What is the best method or approach for me to read the CSS from a whole website, and return only all the CSS rules that are referenced in the site, so rules that are not referenced are not returned to the operator?

I can then take the output from this function and then minify it and save the massive CSS overhead of bootstrap.

Or, is there a completely different way of doing this I've not considered?

---

Additional: I have read How to remove unused styles from twitter bootstrap? which is similar to what I'm asking, but the correct answer here references some sort of Bootstrap selection where I can choose which styles I take from the Bootstrap. This is dated 2013 and seems to refer to Bootstrap version 2.

Also, I do not use Grunt and am unfamiliar with Less. Sorry :-/

Answer 1

You can customise the components that are compiled at http://getbootstrap.com/customize/. This way you will have a smaller outputted file but all dependencies will be met.

To get even finer control you can use the source .less files to compile only the components you want.