Posted by
flyerhzm
on
August 15, 2010
Using css sprite can reduce a large number of http requests, so it makes the web page loaded much faster. It it painful to composite a lot of images manually, do it automatically.
The advantage of using the css sprite is to reduce a large number of http requests, so it makes the web page loaded much faster. I often find it is painful to compose a lot of images into one css sprite image and measure the x and y positions for each image. Besides this, it always causes conflict when more than one person change the css sprite image.
So I wrote a css_sprite gem to make css sprite automatically and intelligently, it follows the idea of Convention Over Configuration.
First, let's look at the convention of the directory structrue.
![]()
The blue parts on the above image are the css_sprite directories according to convention. That means the directory whose name is css_sprite or css_sprite suffixed (e.g. another_css_sprite) needs to do the css sprite.
The green parts are images that need to be tranformed into the css sprite. Once you add images to the css_sprite directory or remove images, the css sprite operation will be automatically executed.
The red parts are automatically generated files. For each css_sprite directory, there is a css sprite image generated, combined by all the images under the css_sprite directory, and there is also a css or sass file generated according to the css_sprite image.
What about the generated css file?
.twitter_icon, .facebook_icon, .login_button, .logout_button {
background: url('/images/css_sprite.png?1270170265') no-repeat;
}
.twitter_icon { background-position: 0px 0px; width: 14px; height: 14px; }
.facebook_icon { background-position: 0px -19px; width: 14px; height: 14px; }
.login_button { background-position: 0px -38px; width: 103px; height: 36px; }
.logout_button { background-position: 0px -79px; width: 103px; height: 36px; }
That means, the generated css file follows the naming convention: one image under the css_sprite directory corresponds to one class in the generated css file, the name of class is just the same as the name of image. The advantage of this is that developers only need to know what images are under css_sprite directory, then they can use the corresponding class names to display these images on the html page.
Follow these rules, what you need to do is to put a new image into the css_sprite directory, then use the corresponding class name to display the image on html page. Generating css sprite image and css files are done automatically. Of course when I remove an image from the css_sprite directory, it is also removed from css_sprite image and css.
These are css sprite best practice I follow. Now it's time to see how to implement these in a rails application.
install the css_sprite gem
create css_sprite or css_sprite suffixed directory, and put any images into the css sprite directory.
you can use "rake css_sprite:start" to generate css sprite image automatically all the time, or use "rake css_sprite:build" to run the css_sprite once manually.
then add the stylesheet "css_sprite.css" in html and use the generated css class to display image.
The css_sprite gem also supports to generate sass and scss.
And to avoid the conflict of css sprite image and css, add public/images/css_sprite.png and public/stylesheets/css_sprite.css into .gitignore file. So only images under css sprite directory are in the control of git, and everyone should build the css sprite image automatically by the rake task.
Don't hesitate to use the css_sprite to speed up your productivity.

Comments
First, thanks for sharing this, it s quiet great, i just used it !
I m just wondering if it s not better to create one sprite image by folder, but be able to only have on CSS file for all of it... sounds to me a better alternative.
Also, the css class name generate should in my opinion base on the prefix of the _css_sprite folder.
For example if you have multiple page and want for each a sprite file, you don't want to create 1 sprite image of each, so you create multiple *_css_sprite folder, but you want class name that reflect the page for example, then you have to create sub folder in each *_css_sprite folder.... and you end also with a lot of css file to include, since it s so small it should be possible to have all css in one file ...
I hope you understand what i mean,
But anyway, thanks !
The class name in css sprite should not be related to page, the image names should be *_icon.png, *_image.png, *_bg.png, etc. They represents images only. If you want class name that reflect the pages, you have to create sub folders, I don't recommend this way, you may rethink your class names in view page.