Solved

Removing unused CSS code from Bootstrap 3

Posted on 2014-12-18
5
342 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

910 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

24 Experts available now in Live!

Get 1:1 Help Now