Какие плюсы и минусы sprite

А, слушай, вот эта ваша модная хуйня — CSS-спрайты! Ну, вроде как все иконки в одну картинку запихнуть, да? Ну, типа, круто звучит, но давай разберём, где тут реальная польза, а где просто пиздёж маркетологов.

Что хорошего, блядь (плюсы):

• Запросов меньше, ебать. Вместо того чтобы браузеру стучаться на сервер за каждой мелкой иконкой по отдельности — раз! — и одна картинка загрузилась. Всё, приехали. Особенно раньше, когда лимит на одновременные запросы был жёсткий, это было спасение.
• Кешируется на ура. Скачал один файл sprite.png — и всё, он у тебя в кеше лежит до скончания времён (или пока кэш не почистишь). Новые страницы открываются — иконки уже тут как тут, не надо их снова тащить.
• Ховеры-активы — раз плюнуть. Хочешь иконку поменять при наведении? Да хуле там! Просто сдвинь background-position на другую координату в этом же спрайте — и готово, никаких морганий при загрузке второй картинки.
• Вес иногда меньше. Ну, потому что в одном PNG-файле одна общая палитра цветов на все иконки, а не в каждом файле своя. Накладных расходов меньше, епта.

А теперь, сука, ложка дёгтя (минусы):

• Обновить — пиздец. Захотел одну иконку поменять? Ну всё, пиши пропало. Надо заново весь спрайт собирать, все координаты пересчитывать, если что-то добавилось или съехало. А если над проектом не один человек? Один обновил, а другой про старый спрайт не знает — и пошла писать губерния, все иконки съехали, ёпта!
• Если юзаешь 2 иконки из 50 — зачем тебе 48 лишних, дурачок? Загружаешь гигантскую картинку, а пользуешься крошечным кусочком. Неэффективно, блядь. Особенно на мобилках, где каждый килобайт на счету.
• Ретина — отдельная боль. Чтобы на экранах с высокой плотностью пикселей не было мыла, надо делать спрайт в два раза больше. А потом через background-size его масштабировать обратно. Геморрой, да и только. Или делать два отдельных спрайта — один для обычных экранов, другой для ретины. Вообще пиздец.
• Позиционирование — высшая математика. background-position: -148px -73px; Ну ты посмотри на это! Как будто координаты бомбы вводишь. Один пиксель ошибёшься — и вместо иконки дома у тебя пол-иконки юзера торчит. И поддерживать этот ад, когда спрайт разрастается... волнение ебать, терпения ноль ебать.

Ну и как с этим жить, примерчик:

/* Вот общий класс для всех иконок, тут спрайт подключается */
.icon {
  background-image: url('sprite.png');
  width: 20px;
  height: 20px;
  display: inline-block; /* Чтобы размеры работали */
}

/* А тут уже конкретные иконки, просто сдвигаем фон */
.icon-home {
  background-position: 0 0; /* Верхний левый угол спрайта */
}
.icon-user {
  background-position: -20px 0; /* Сдвинулись на 20px влево по X */
}

В общем, спрайты — инструмент, блядь, как молоток. В своё время — охуенный. Сейчас, с HTTP/2, который много мелких файлов качает быстро, и с SVG, который и в коде можно хранить, и масштабируется как хошь, — уже не так актуально. Но знать надо, а то придёшь на легаси-проект, а там спрайт на мегабайт, и сиди, ебашь эти координаты, в рот меня чих-пых!