I am constantly on the lookout to see what technologies are out there and which ones will be useful to me. All of my projects involve using cascading style sheets. Those style sheets have been getting bigger and bigger as I add more features. Now I use CSS for gradients when previously I used graphic files as background images. Although the style sheets have been getting bigger, they’ve replaced gifs and png files. The net result has been smaller total code. Then comes the question, how do you deal with large CSS files?
We’ve been using CSS frameworks for quite some time. The first one we used was Blueprint. It allowed us to design to a 960px grid.
Why 960? 960 is a nice useful number. You can divide it evenly by 2, 3, 4, 5, 6, 8, 10 & 12. This makes it very flexible and easy to create a website of almost any design without have to resort to a lot of arithmetic calculations. Blueprint enabled us to get a design done a lot more efficiently.
The problem with Blueprint was that it was a fixed width grid. That doesn’t translate well for a mobile phone.
CSS sprites are basically a contact sheet of images. Each image is picked out using CSS positioning properties. The main advantage of sprites is that you use one image for all your icons. That means only one call to the web server which means less overheads. This means less bandwidth and a faster site. Bonus!