EDIT: While my specific problem is with the Twitter Bootstrap system, the solution I'm looking for does not have to be Twitter Bootstrap specific, but more a solution for any CSS style sheets.
I'm starting to explore the world of Twitter Bootstrap for the current project I'm working on. I am using Bootstrap 3.3.6
Problem (why I have a problem below)
The main Bootstrap CSS file is 6,760 lines, as well as additional files for adding my own CSS site to the site. In total, this means that the site loads ~ 8700 lines of CSS (unminified) for each page.
But the rules that apply to the website use only ~ 700 of these lines. This is massive overhead for each page, and even with CSS minimization in .min.css format .min.css it's still a huge percentage of overhead.
I am looking for a way to reduce this overhead without removing any of the rules used from CSS files.
What I tried (and why it didn't work or is impractical)
I used Firefox Dust-Me with great success, which can identify all unused CSS rules on a page or even the entire site.
This is what I want , but has two serious drawbacks:
It saves only the CSS rules that are used on the page for the device / media used (for example, it tells me that all the rules are in a workaround to bypass IE10 browsing. The CSS file is not used because I use the Firefox browser, not IE10). It also does not take into account the specific rules of media queries.
Another main disadvantage of using Dust-Me (in particular, but with other similar programs that I found have similar disadvantages) is that while it tells me which rules are not used, this does not allow me to copy / paste the CSS used from source files.
I also looked at a few other remote CSS and Google Chrome Developers Audit rules, which are useful but do the same, listing unused rules in text format, which is almost half the work I'm looking for.
Problem (why do I need your help to solve this problem)
So, I have a Google Chrome Audit account which tells me that 88% bootstrap.css and 65% bootstrap-theme.css not used. These unused items are listed in text format, and there are hundreds of them. for now, I can only see that I will need to find / replace on each of them, removing them [rule identifiers] from the source, and then going through the CSS file and deleting all the commands that no longer have any rules.
So I ask:
What is the best method or approach for me to read CSS from the entire website and only return all CSS rules referenced on the site, so rules that are not specified are not returned to the operator?
I can then output the function and then minimize it and save massive CSS overhead for bootstrapping.
Or , is there a completely different way to do this that I have not considered?
Extras: I read How to remove unused styles from twitter bootstrap? which is similar to what I ask, but the correct answer here refers to some Bootstrap choice, where I can choose which styles I take from Bootstrap. This is dated 2013 and seems to apply to Bootstrap version 2.
In addition, I do not use Grunt and am not familiar with Less . Sorry: -/