Detect unused CSS selectors and remove them from the website

During the development, we forget to remove selectors, which have been changed during the different phases of the website, Which makes stylesheet file so large. Due to which, stylesheets load slower, which makes the website load slower. So, this is necessary to remove unused css rules from stylesheets to make a website load faster.

There are so many online tools, Firefox Extension as well as commercial products to do that.

Firefox Development Tool: Dust-Me Selectors
It scans your HTML pages and find the unused CSS selectors. It takes all CSS selectors from all stylesheets attached to the page you are viewing and then scan that page to find the unused selectors. It stores data separately for each website you viewed.

Disadvantage: It just gives you the unused selectors, but not providing the updated stylesheet.

Dead Weight: Ruby Gem
It is a CSS coverage tool and only works for rails website. You need to provide a set of stylesheets and URLs, from which it provides a list of selectors which can be “safely” deleted. You can manually remove them from the stylesheet using that list.

You can watch the screen-cast on Dead Weight Introduction at http://railscasts.com/episodes/180-finding-unused-css

Unused-CSS.com: Online Tool
It asks for an online URL to check. From the URL, It scans all CSS files and show the results separately for each stylesheet with graphs. Currently it scans only homepage, but if you need whole website results, you need to provide your e-mail address and it will send the results to you in email.

Helium CSS: Javascript Tool
It is a javascript-based tool and runs from the browser. It is a used for discovering unused selectors across many pages on a web site. It accepts only list of URLs, parses each URL provided and build a list of stylesheets. Using this list of stylesheets and URLs, it generates a list of unused selectors not used in any of the URL provided.

TopStyle 5: Windows Application
It is an HTML Editor, which includes a tool named Style Sweeper. Style sweeper can remove white spaces and blank lines, sort according to Class, Element, ID and also combines multiple selectors. It will also combine repeated property as well as selectors if they are same. But it’s a commercial product costs $80 (USD).

LiquidCity CSS Cleaner: PHP Script
It uses regular expressions to check any HTML page specified by you, generates the report with unused selectors for that HTML page only. From that report, you can manually remove them from the stylesheet.

There are so many other tools available. We will introduce them very soon.

Comments

comments

12 thoughts on “Detect unused CSS selectors and remove them from the website

  1. Heya i am for the first time here. I came across this board and I find It really useful & it helped
    me out much. I hope to give something back and aid others like you helped me.

  2. I think what you wrote was actually very logical. However, think on this,
    suppose you added a little content? I ain’t suggesting your information is not solid, however suppose you added a post title to
    maybe grab a person’s attention? I mean Detect unused CSS selectors and remove
    them from the website | Techno Workshop is kinda boring.
    You should glance at Yahoo’s home page and watch how they create article titles to get
    people interested. You might try adding a video
    or a picture or two to get readers interested about what you’ve
    got to say. Just my opinion, it might make your blog a little livelier.

  3. Thanks for one’s marvelous posting! I actually enjoyed reading it, you happen to be a great author.
    I will be sure to bookmark your blog and will efentually come back down the road.
    I wanht to encourage youeself to continue your great writing, have a nice morning!

  4. Write more, thats all I have to say. Literally, it seems as though you relied on the video
    to maje your point. You obviously know what youre talking
    about, why throw away your intelligence on just posting vidros too your site when you could be giving us somethig enlightening to read?

  5. I must say, as a lot as I enjoyed reading what you had to say, I couldnt help but lose interest after a while.

  6. Hello to every one, the contents existing at this web page are
    in fact remarkable for people knowledge, well, keep up the nice work fellows.

  7. I do not even know the way I finished up here, but I
    thought this submit was once great. I do not recognise who you’re but definitely you are going
    to a well-known blogger for those who aren’t already. Cheers!

  8. I want to to thank you for this fantastic read!! I absolutely enjoyed every little bit of it.
    I have got you saved as a favorite to look at new things
    you post…

  9. Hi there! Do you use Twitter? I’d like to follow you if that would be ok.
    I’m undoubtedly enjoying your blog and look forward to new updates.

  10. Hi there would you mind sharing which blog platform you’re working with?
    I’m planning to start my own blog in the near future but I’m having a difficult time deciding between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design and style seems different then most blogs and I’m looking for something completely unique.
    P.S Sorry for being off-topic but I had to ask!

Comments are closed.