Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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!

Get Helium

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

Get Helium

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    I&#8217;m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

  • By
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

Incredible Demos

  • By
    Google Font API

    Google recently debuted a new web service called the Font API.  Google's Font API provides developers a means by which they may quickly and painlessly add custom fonts to their website.  Let's take a quick look at the ways by which the Google Font...

  • By
    PHP Woot Checker &#8211; Tech, Wine, and Shirt Woot

    If you haven't heard of Woot.com, you've been living under a rock. For those who have been under the proverbial rock, here's the plot: Every day, Woot sells one product. Once the item is sold out, no more items are available for purchase. You don't know how many...

Discussion

  1. Adrian

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

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

    • BlaineSch

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

  3. BlaineSch

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

  4. Lovely

    Very interesting tools , i will try it now.

    Thank you

  5. Chris

    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!