Назначить имя класса тегу <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*/}

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

UPDATE:

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

Ответы

Ответ 1

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

Процитировать Steve Ouders (эксперт по оптимизации CSS) http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/:

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

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

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

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

Итак, чтобы подтвердить, ответ да, пример ниже действительно быстрее, но помните о большей картине:

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

Ответ 2

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

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

Ответ 3

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

Если вы имеете в виду <img class="someclass"> и

.someclass {
  [cssrule]
}

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

Ответ 4

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

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

Ответ 5

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