Solved

Removing unused CSS code from Bootstrap 3

Posted on 2014-12-18
5
347 Views
Last Modified: 2014-12-18
Hi, I am fairly new to Bootstrap. Here's a site I put up: diabeticmealprograms.com.

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?

Thanks!
0
Comment
Question by:mel200
  • 3
5 Comments
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 40508287
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.
0
 

Author Comment

by:mel200
ID: 40508316
Nice, thanks! I'll try that right now.
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 250 total points
ID: 40508317
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.
https://addons.mozilla.org/en-US/firefox/addon/css-usage/
0
 

Author Comment

by:mel200
ID: 40508330
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.
0
 

Author Closing Comment

by:mel200
ID: 40508332
Thanks to both of you!
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now