Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Scanning for unused or overwritten styles

Now frame works such as Foundation and Bootstrap are getting ever more popular we are building on top of existing code which tends to mean overwriting a great deal of existing styles.

Could anyone recommend a good reliable method of scanning the stylesheet and deleting all the styles not used anymore and out putting a new stylesheet.

Thanks

3 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi Suleiman Leadbitter,

Chrome's dev tools has a really handy tool called Audits that allows us to do just thatโ€“โ€“audit our code. It lets you know which styles are unused. To use it:

  • Open Properties > Tools > Developer Tools
  • Click on the Audits tab within the Developer Tools window
  • Ensure the Web Page Performance option is checked.
  • Click Run
Sean T. Unwin
Sean T. Unwin
28,688 Points

CSSCSS may not be exactly what you are looking for, although it may be something to contemplate adding to your toolkit. As an added plus it works with SASS as well.

James Barnett
James Barnett
39,199 Points
  • Dust Me Selectors is basically a Firefox extension which works similarly to the Chrome audit feature.
  • mincss a python script that will return a CSS files with unused CSS selectors removed
  • unused-css.com a paid service that will let you download a "clean" copy of CSS.

I saw mincss before James Barnett but I have no idea how I am meant to use it :/ Any pointers by anyone would be superb.