CSS спрайты

[Skaiman]

Пользователь Skaiman разместил новый ресурс:

CSS спрайты - Небольшой мануальчик по использованию спрайтов CSS

Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса.
Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно.
Главным преимуществом использования спрайтов является однократная загрузка сервером сразу всех элементов в одном файле. некоторые могут подумать, что подгрузка маленьких, мало весящих картинок...

Узнать больше об этом ресурсе...

 

[Improvs]

Подскажите, как правильно сорганизовать для разделов иконки по такому примеру:

.red, .yellow, .green {
background-image: url("http://skaiman.ga/img/sprait_01.png");
display: block;
background-repeat: no-repeat;
height: 64px;
width: 64px;
}

?

Можно сделать так:

.node.node_51 .nodeIcon,
.icon-forum-51 {
  display: inline-block;
  background: url(/index.png') no-repeat !important;
  overflow: hidden;
  text-indent: -9999px;
  text-align: left;
  background-position: -1px -2200px !important;
  width: 60px;
  height: 60px;
}

.node.node_89 .nodeIcon,
.icon-forum-89 {
  display: inline-block;
  background: url(/index.png') no-repeat !important;
  overflow: hidden;
  text-indent: -9999px;
  text-align: left;
  background-position: -1px -1895px !important;
  width: 60px;
  height: 60px;
}

Но нельзя ли сократить код и сделать более легким? Как на примере первом?


++++ UPDATE +++++

Крутил, вертел, сделал так:

.node.node_2 .nodeIcon, .node.node_12 .nodeIcon, .node.node_13 .nodeIcon {
  background-image:url("/sprite/top.png")!important;
}

.node.node_12 .nodeIcon {
background-position: -0px -62px!important;
}

Правильно или можно еще упростить?

 

[Skaiman]

Можно, потом как нибудь, щас времени нет, да и желания :)