Removing unused CSS code from Bootstrap 3

Hi, I am fairly new to Bootstrap. Here's a site I put up:

By going to Chrome development tools, I can see that there was one whole CSS file I wasn't using, so I took away the link to that file on all the pages.

But for other files, like bootstrap.css: 93% is not used by the current page.
I'd love to take that all away, and they list it, but I'm not sure how to go about removing it, without looking for each bit of CSS, and deleting it on the CSS page. That would take forever.

So, two questions:

1. Is it worthwhile deleting all the unused CSS?
2. Is there an efficient and accurate way of doing it?

Who is Participating?
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
I use the CSS-Usage 0.3.3 extension in Firefox to check for unused CSS and eliminate it.  But if it is in external files that are used by many pages, then you usually need to leave it alone.  The only reason I clean up CSS in my customers pages is to make it easier to see what's going on.  Otherwise, there is almost never any impact on page load or operation unless they have done some really dumb.
GaryConnect With a Mentor Commented:
If you are using a CDN for the Bootstrap files (sometimes better) then there is no point
Otherwise install Dust-Me selector in FF
Create an XML sitemap of all pages in site and run Dust-Me with the sitemap, it will create a new css file with all redundant css removed.
mel200Author Commented:
Nice, thanks! I'll try that right now.
mel200Author Commented:
Ok, thanks, Dave, I'll keep that in mind as well. It will take me a couple of tries to work with dustme, good tool.
mel200Author Commented:
Thanks to both of you!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.