Solved

Removing unused CSS code from Bootstrap 3

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

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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to dynamically set the form action using jQuery.

757 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