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 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.
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.