O'Reilly

Detect Unmatched CSS Selectors with Helium

By on  

One thing I can't stand is extra code.  Whether it's an extra CSS or JavaScript file that's been included by the page, bloated HTML, or unoptimized images, we're making our millions of of desktop and mobile visitors pay for our laziness and mistakes.  A great tool called Helium is available to help developers detect selectors in their stylesheets that are unmatched or malformed.  Let me show you how it works!

Start by including the script in your page and initializing Helium upon load:

<script type="text/javascript" src="js/lib/helium-css/helium.js" onload="helium.init()" async></script>

As soon as the page is loaded, the developer is presented with a textarea with which they may type page URLs to test.  These pages are then loaded and a report is generated, detailing the unused selectors, malformed selectors, and pseudo-selectors which should be tested manually:

Helium CSS Textarea

Helium CSS Result

Helium is an excellent tool for identifying legacy and unnecessary CSS.  The information provided by Helium allows developers to remove unused CSS or better segment site CSS.  This tool is the perfect utility for developers looking to quickly optimize their CSS code.  In fact, I've not seen a tool so easy to implement and use.  Let me know if you agree!

Treehouse Learning

Upcoming Events

Recent Features

  • 5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • dwImageProtector Plugin for jQuery

    I've always been curious about the jQuery JavaScript library. jQuery has captured the hearts of web designers and developers everywhere and I've always wondered why. I've been told it's easy, which is probably why designers were so quick to adopt it NOT that designers...

  • Truly Responsive Images with responsive-images.js

    Responsive web design is something you hear a lot about these days. The moment I really started to get into responsive design was a few months ago when I started to realise that 'responsive' is not just about scaling your websites to the size of your...

Discussion

  1. Did you know about mincss, written by our own Peterbe? It seem to serve the same purpose, see http://www.peterbe.com/plog/mincss

  2. Does it do the same job as CSS Usage ? (Firebug extension)

    • PH, this tool appears to support checking selectors across multiple pages. CSS Usage is current page only.

  3. PH, this tool appears to support checking selectors across multiple pages. CSS Usage is current page only.

  4. Very interesting tools , i will try it now.

    Thank you

  5. It’s a handy tool apparently but not a lot of people are using it? It is not efficient enough, or.. I haven’t tried it yet.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!