Назначить имя класса тегу <img> вместо того, чтобы записать его в файл css?

Мне любопытно знать, правда ли, что лучше присвоить имя класса <img> тег в файле HTML вместо того, чтобы записывать его прямо в файл CSS?

<div class="column">
   <img class="custom-style" alt="" />
   <img class="custom-style" alt="" />
   <img class="custom-style" alt="" />
</div>

вместо

.column img{/*styling for image here*/}

Мне нужно знать, есть ли различия между ними с точки зрения веб-производительности?

ОБНОВИТЬ:

Извините, предположительно вопрос несколько <img> теги внутри .column div и все изображения используют один и тот же стиль.

Источник

5 ответов

Решение

Короткий ответ: добавление класса непосредственно к элементу, который вы хотите стилизовать, действительно является наиболее эффективным способом нацеливания и стилизации этого элемента. НО, в сценариях реального мира это настолько незначительно, что об этом вообще не стоит беспокоиться.

Цитируя Стива Одерса (эксперт по оптимизации CSS) http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/:

Основываясь на тестах, у меня есть следующая гипотеза: для большинства веб-сайтов возможный выигрыш в производительности от оптимизации селекторов CSS будет небольшим и не будет стоить затрат.

Поддержка кода намного важнее в реальных сценариях. Поскольку основной темой здесь является производительность переднего плана; реальное повышение производительности для быстрого рендеринга страниц можно найти в:

  • Делать меньше HTTP-запросов
  • Используйте CDN
  • Добавить заголовок Expires
  • Компоненты Gzip
  • Поместите таблицы стилей вверху
  • Положите сценарии внизу
  • Избегайте CSS-выражений
  • Сделайте JS и CSS внешними
  • Уменьшить поиск DNS
  • Minify JS
  • Избегайте перенаправлений
  • Удалить дубликаты скриптов
  • Настроить ETag
  • Сделать AJAX кэшируемым

Источник: http://stevesouders.com/docs/web20expo-20090402.ppt

Так что, чтобы подтвердить, ответ - да, приведенный ниже пример действительно быстрее, но имейте в виду общую картину:

<div class="column">
   <img class="custom-style" alt="appropriate alt text" />
</div>
Источник

Это просто более универсально, если вы дадите ему имя класса, так как указанный вами стиль будет применяться только к этому имени класса. Но если вы точно знаете каждый .column img и хотите, чтобы стиль был таким же, нет причины, по которой вы не можете использовать этот селектор.

Разница в производительности, если таковая имеется, в наши дни незначительна.

Источник

Назначение имени класса и применение стиля CSS - это две разные вещи.

Если ты имеешь ввиду <img class="someclass">, а также

.someclass {
  [cssrule]
}

то нет никакой реальной разницы в производительности между применением CSS к классу или .column img

Источник

Я думаю, что класс на теге img лучше, когда вы используете один и тот же стиль в другой структуре на вашем сайте. Вы должны решить, когда вы пишете меньше строк кода CSS, и HTML становится более читабельным.

Источник

Это зависит. Если у вас есть более двух изображений в .column но вам нужно только несколько изображений, чтобы применить CSS, тогда лучше добавить класс к изображению напрямую, а не делать .column img{/*styling for image here*/}

С точки зрения производительности лучше применить класс к изображению, потому что при этом CSS не будет искать возможное дочернее изображение.

Источник
Другие вопросы по тегам