Matt Ward has written a wonderfully insightful and informed post asking whether some recent CSS experiments are pushing the technology beyond what it was designed for.

Each of these experiments takes a different approach. Some, like the line graph, have some practical applications in the real world, while others like the CSS fail whale are completely and entirely impractical. It’s certainly interesting to know that it can be done, but that doesn’t necessarily mean that it should be done.

This trend for the use of CSS as a design tool has been bugging me for a while now, and Matt hits on the very heart of the problem, drawing parallels with table-based layouts:

If you’ve been around the web design and devlopment industry for very long, you probably already know how much of a faux pas table-based design is considered. Well, when it comes to CSS icons, consider these thoughts:

  1. Bloat – All the necessary CSS declarations will really bloat up your style sheets, making them an absolute nightmare to manage. Wait, didn’t I just write those same words? Also, depending on how the icons are achieved, you might find your HTML bloating up with extra elements too.
  2. Inflexible – Again I admit that people have done some really incredible things with CSS, but compared with a real graphics program, CSS generated graphics are incredibly limited in what they can do.
  3. Purpose – As we’ve already discussed at some length, CSS wasn’t designed as a tool for creating graphics, despite the fact that people are able to do some pretty amazing things with them, like the Peculiar and social media icons we’ve already looked at. Impressive? Yes. The right tool? No.

Many of these CSS experiments are very worthy exercises to show the possibilities and extremes of what the technology can do – but most aren’t practical for production use. CSS is a technology for defining rules about how content should be visually presented; it’s not a tool for generating graphics.

Liked this? You might also enjoy:

  1. The 1Kb CSS Grid
  2. Twitter.com or a Twitter App?
  3. Further Thoughts on CSS, Experiments and Icons
  4. Pure CSS Icons: Make The Madness Stop