Skip to content
Nov 21 / Dan DeFelippi

Announcing cssess – The Bookmarklet That Finds Unused CSS Selectors

I’m happy to announce the release of cssess (pronounced secess, like secession), a bookmarklet that helps you find unused CSS selectors on any site.

Around mid Jan 2010 Charles Lawrence announced Helium. Helium is a similar JS tool designed to help find unused CSS selectors. It was a great idea but had a number of significant flaws.

  • It used querySelectorAll, meaning it wouldn’t work in IE 6 or 7.
  • It was designed to be included in the page itself and used on development sites precluding its use on live sites.
  • While it would spider other pages to test selectors, you had to add the URLs manually.

Shortly after I decided to create my own project based on Helium that would solve these issues and cssess was born. I replaced querySelectorAll with jQuery, designed it for use as a bookmarklet, and had it spider links on the current page. Unfortunately it fell to the wayside and was never developed far enough for public release, until now.

Using cssess

Using cssess is easy.

  1. Drag the following link to your bookmarks: cssess
  2. Navigate to the page you want to check and invoke the bookmarklet.
  3. cssess will present you with a list of URLs linked to by the current page. Select the ones you want to include in the test.
  4. Click run.

After running, cssess will present you with a list of unused selectors for each page.

Known Issues

I consider cssess to be at a beta level. It’s usable but has issues.

  • It doesn’t combine unused selectors across pages correctly.
  • Its stylesheet is minimal, meaning it could look funny due to styles already included on the site.
  • It lists some URLs multiple times.
  • Probably some other stuff I’m not thinking of right now.

There are also some features I want to add, including the ability to enter additional URLs manually and checking for a sitemap.

Feel free to fork cssess on github, fix bugs and add features, and submit a pull request. If you find additional issues or have feature requests please add them to the github issue tracker.


  1. sk / Nov 21 2010

    It does not work on URLs starting with file: and http://localhost

    • Dan DeFelippi / Nov 21 2010

      Thanks. I’ve added it to the list of issues on github.

  2. Mr. Fussyfont / Nov 21 2010

    Sounds good. How does it compare to the Dust Me Selectors add-on for Firefox, other than being cross-platform? Haven’t tried that add-on in awhile; don’t know if it’s been updated.

    • Dan DeFelippi / Nov 21 2010

      Dust-Me Selectors hasn’t been updated in over a year. I thought they had dropped support for it entirely but it should, apparently, work with FF 3.6. I haven’t used it in a long time so I’ll have to try it out again.

  3. amrit / Nov 21 2010

    Minor quibble: you might want to change the text on the “Drag this link to your bookmarks” link in the blog post to something like “csses” so the title of the bookmarklet once dragged isn’t “Drag this link to your bookmarks.”

  4. Karl / Nov 22 2010

    Great little widget/bookmarklet – keep it up! Slight comment – it appears to want to create a framed page and put the original site into frame – the main site I test has code to prevent being stuck in a subframe (due to some unsavoury practices by one indexing site in particular) – so I can’t use this!

    Damned shame… maybe another way around it could be found?

    • Dan DeFelippi / Nov 23 2010

      Opening each page in an iframe is necessary to make sure the page is fully rendered, including any JS. Originally I thought about pulling the pages down using ajax but that wouldn’t account for any dynamic changes.

      I suppose an option would be to use a popup window but that’s more intrusive for most users. A hidden iframe is much nicer, except in the situation you described.

  5. Thibaut Allender / Nov 22 2010

    Good idea but it will always remain dangerous because it cannot predict javascript interactions. If you add classes or elements/parts of code using JS, which is very likely to happen in modern websites, it will list “unused” selectors you could remove by mistake.

    • Dan DeFelippi / Nov 23 2010

      It’s a tool designed to help developers, not replace them. You’d need to review what it finds and decide what can be removed and what can’t.

  6. Pete / Nov 22 2010

    Made some additions to createWin for select all/none and validating at least one selection is made prior to the run, hope you can use them!

    cssess.v.createWin = function() {
    // Remove window if it already exists
    if ( {;
    cssess.$(“#cssess”).remove(); = cssess.$(‘cssessselect all/noneXRun’);

    // Add event to run button to run tests
    cssess.$(“”, {
    // Clear any previously detected styles
    if (cssess.$(‘.links’).find(‘:checkbox:checked’).length > 0) {

    // Load the checked links and spyder them.
    } else {
    alert(‘You must select at least one page’);

    // select all
    cssess.$(“a.all”, {
    cssess.$(‘.links’).find(‘:checkbox’).attr(‘checked’, ‘checked’);
    return false;
    // select none
    cssess.$(“a.none”, {
    cssess.$(‘.links’).find(‘:checkbox’).attr(‘checked’, ”);
    return false;
    // Close button removes the win div
    cssess.$(“a.close”, {;
    return false;

  7. Daryl / Nov 22 2010

    Can you make it automatically uncheck mailto links?

  8. Danilux / Nov 23 2010

    Does it work with local files like “Web developer Toolbar” has an option to validate local css. This tool would be great for testing websites that are in development soon to be published.

    • Dan DeFelippi / Nov 23 2010

      It doesn’t validate CSS. It finds unused selectors. You’d want to run validation first, fix any issues, then use cssess.

      • Danilux / Nov 23 2010

        Yeah I know It doesn’t validate, I must have explained myself wrong, I was wandering if this checks unused selectors on local files instead of only files already on hosting servers.

  9. ainthek / Jan 12 2011

    MSIE 8 error “console is undefined” ?
    Nice work anyway.

    • Dan DeFelippi / Jan 13 2011

      I had it set to do a console.log when there was a cross-domain security exception. I’ll fix it in the next update.

  10. ainthek / Jan 12 2011

    unselect all button please ?

  11. Domi / Jan 13 2011

    Would be nice to display all unused selectors which aren’t used on any site.

    • Dan DeFelippi / Jan 13 2011

      The browser security model doesn’t allow cross-domain requests. It’s unable to request CSS from another domain. This is obviously a problem if someone is using a CDN or wants to check multiple domains. One possibility would be to run it server-side using something like NodeJS. I’ll add that as something to look into in the future.

  12. ryan / Jul 20 2011

    doesnt work on any page I try..?

    • Dan DeFelippi / Jul 22 2011

      Sorry Ryan, the URL to the script changed and I hadn’t updated this post. It’s updated now, try again.

  13. Faehren / Feb 21 2012

    Is there a version usable with google chrome as plugin?

    • Dan DeFelippi / Feb 21 2012

      It’s just a bookmarklet but a plugin would be cool. Maybe someday when I have the time.

Trackbacks and Pingbacks

  1. Tweets that mention Announcing cssess – The Bookmarklet That Finds Unused CSS Selectors | Razor Fast --
  2. Cssess – The Bookmarklet That Finds Unused CSS Selectors | Techarama
  3. HTML Scripts Tips and Secrets
  4. Announcing cssess – The Bookmarklet That Finds Unused CSS … : : css
  5. Announcing cssess – The Bookmarklet That Finds Unused CSS … » Web Coding Unravelled
  6. Announcing cssess – The Bookmarklet That Finds Unused CSS Selectors | Razor Fast « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
  7. Announcing cssess – The Bookmarklet That Finds Unused CSS Selectors | Razor Fast : Popular Links : eConsultant
  8. Smartphone race gets tighter « V E X E D
  9. JavaScript Magazine Blog for JSMag » Blog Archive » New Roundup: iOS 4.2 Accelerometer and WebSockets support, Colour.js, W3C drops Web SQL
  10. High Performance Web Sites :: bookmarklets for mobile: Mobile Perf and Page Resources
  11. Speed Up Your Mobile Site With the ‘Mobile Perf’ Bookmarklet | Al Terry Gough
  12. Speed Up Your Mobile Site With the ‘Mobile Perf’ Bookmarklet « Web Development
  13. Speed Up Your Mobile Site With the ‘Mobile Perf’ Bookmarklet | ComputerMind
  14. Remove unused CSS – Affordable CSS Optimizer Service | Hackadelic
  15. Detecting Unused CSS Selectors – Part 2 | Refulz PHP
  16. Mobile Performance – wie lassen sich mobile Websites schneller machen? | Mobile Webseiten für Business
  17. Remove unused CSS « Web Resources, Design Inspiration, Freebies, Tutorials, Photoshop, Wordpress |
  18. 未使用のCSSを調べるツール | オナニーの作法

Comments are closed.