Nov 21 / Dan DeFelippi

Announcing cssess – The Bookmarklet That Finds Unused CSS Selectors

bookmarklet, css, intermediate, javascript

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.

Drag the following link to your bookmarks: cssess
Navigate to the page you want to check and invoke the bookmarklet.
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.
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.

42 Comments

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.
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.
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.”
- Dan DeFelippi / Nov 21 2010
  
  Good catch, link updated.
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.
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.
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.win) {
cssess.win.remove();
}
cssess.$(“#cssess”).remove();
cssess.win = cssess.$(‘cssessselect all/none XRun’);

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

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

// select all
cssess.$(“a.all”, cssess.win).click(function() {
cssess.$(‘.links’).find(‘:checkbox’).attr(‘checked’, ‘checked’);
return false;
});
// select none
cssess.$(“a.none”, cssess.win).click(function() {
cssess.$(‘.links’).find(‘:checkbox’).attr(‘checked’, ”);
return false;
});
// Close button removes the win div
cssess.$(“a.close”, cssess.win).click(function() {
cssess.win.remove();
return false;
});
cssess.win.appendTo(“body”);
};
Daryl / Nov 22 2010

Can you make it automatically uncheck mailto links?
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.
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.
ainthek / Jan 12 2011

unselect all button please ?
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.
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.
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.