Yesterday I had the pleasure to dive into some truly screwed up CSS.

CSS, if done right, is a godsend. It’s awesome. It rocks.

But it can be overwrought.

It’s similar to when CSS was new and there was the move to get away from tables — the “tables are evil” mindset set in.

Well, tables, when you use them for tabular data is a good thing. Slicing an image up into a bazillion slivers and assembling them via a table is evil, but tables themselves are not any more evil than a shark.

At some point someone thought that everything should be CSS. Even the frickin’ images.

That, dear friend, is the religion that I ran into yesterday. A magnifying glass icon was a bit off for our designers liking. I needed to shrink it a scosh. No problem. I’ll find the image and resize it down and Bob’s your uncle.

But no. There was no icon. It was CSS injecting a div :before styled with rounded corners (a circle it turns out) and a div :after with a tiny tall stick rotated 45˚ to form the handle. Awesome… you can bend CSS to you will. Great. But the design is an abomination.

Sure, you don’t use an image, but instead you inject extra layers including a transform into the mix to avoid it. The CSS was around as big as a sprite of a PNG to represent the same thing — though faster.

CSS was intended to solve the problem of adding display to semantic elements, not pure drawing. Gaaahh!!

If you want to see more freaks of nature, feel free to browse the asylum.