Pure CSS Icons: Make The Madness Stop

There is a terrible trend occurring on the Web right now, and I wish for it to stop: icons, made out of pure CSS, suggested as things you can use in your websites.

People have been making things out of pure CSS for a long time now, and until recently that was a harmless exercise in pushing the limits of the technology whilst occasionally coming across production-friendly techniques and creations. It was something I wholeheartedly stood behind, because—again, until recently—the people making those things knew where to draw the line between “experimental technology demo” and “production-friendly technique or implementation”.

Unfortunately, some people have started experimenting with CSS as a “design tool” and it suddenly hit upon a large audience, and seemingly overnight it has become a trend. So what’s the problem with people exploring techniques like these? Actually, a couple things.

First of all, very few of these pages have any kind of warning or explicit mention that these are technology demos and not production-friendly snippets of code for you to use—worse, some even encourage the latter practice and charge you money for them! Fortunately, not all of them are bad: Nicolas Gallagher’s Pure CSS social media icons use clean, semantic markup only and relatively little extraneous CSS, and the page comes with some words of caution that “CSS is not necessarily the most appropriate tool for this kind of thing.” Ironic how the page with the most discouragement happens to also have the most actually usable code.

But now we’re hitting upon the main issue: how usable are these snippets of CSS and markup, really? Is it easy to plug them into your website as you’re designing it? No. Is it easy to plug them into your website as you’re developing it? No. Is it easy to adjust them once they have been integrated into your website? No, no, no!

During the design phase, being able to tweak the pixel look and dimensions of an icon should be as simple as possible; adjusting many lines of CSS code to do this is not it, especially if you didn’t write the CSS originally. You want that icon a little bigger? Tough luck, it was created by someone else at 32 by 32 pixels, now it’s up to you to figure out how to make it all work for 36 by 36. Similarly, implementing an icon should be as simple as writing a CSS background property or adding an <img> tag. It shouldn’t involve adding six meaningless HTML elements nor twenty lines of CSS per icon.

The maintenance angle is even more exemplifying of how terrible this practice is. Changing the way a certain icon looks should be as simple as updating the sprite or image file. Changing the way an icon is positioned in a page should be as simple as adjusting one CSS rule. With pixels designed in CSS, you don’t get this maintenance simplicity: you get a nightmare.

The CSS Zen Garden was not simply a showcase of what you could accomplish with just CSS, it was a pragmatic showcase of real world possibilities. Icons designed in CSS are not that, so when a site comes around to showcase them it should have a big red warning label at the top to remind people that these are technology demos and no more. When they don’t, they are at risk of misleading people—intentionally or not—into thinking these icons are products they can use.

We’ve all worked hard for the past decade to educate web designers and developers to use semantic markup, a separate layer of styling done with CSS, and behaviors and interactions done via progressively enhanced DOM scripting techniques. We didn’t come up with those techniques because they’re the right way to do web design; those techniques are the right way to do web design because they make the process easier, the result more flexible and maintainable, and the overall experience better. Those are the goals we should keep in mind and hold dear; not the fad of the moment, which is really all that these CSS icons are.

If you liked this, you should follow me on Twitter!