CSS Code Smells

Writing stable, cross-browser CSS isn't nearly as easy as it should be. Wouldn't it be nice if you could easily avoid some of the most painful CSS pitfalls?

In this post, I'm going to follow the spirit of Martin Fowler's classic code smells and list a small number of CSS-specific smells that cause bugs and limit productivity. I'm limiting my list to writing for modern browsers and IE versions 7 and later. This isn't a definitive or final list, and I plan to add to it as I get feedback and advice.

Click to read more ...

Integrating CSS Sprite Creation Into a Build

CSS sprites are a standard technique for improving web performance. Combining a bunch of background images into one big image reduces the number HTTP requests. And that improvement leads to faster pages.

But CSS sprites can be hard to maintain, for instance, when it comes time to add additional images to an existing sprite. I started looking for a sprite-generation tool to integrate into our continous builds. It was harder than I expected to find such a tool. I tried css-spriter, which calculated offsets incorrectly for some images.

Click to read more ...