Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Posted by Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

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
Guil Hernandez
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,660 Points
Sean T. Unwin
Sean T. Unwin
28,660 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
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.
Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

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.