Присвойте имя класса <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 и все изображения в одном стиле.

10 голосов | спросил Qiqi Abaziz 26 AMpFri, 26 Apr 2013 08:35:50 +040035Friday 2013, 08:35:50

4 ответа


0

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

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

  

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

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

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

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

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

<div class="column">
   <img class="custom-style" alt="appropriate alt text" />
</div>
ответил Timidfriendly 26 AMpFri, 26 Apr 2013 09:16:08 +040016Friday 2013, 09:16:08
0

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

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

.someclass {
  [cssrule]
}

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

ответил Osiris 26 AMpFri, 26 Apr 2013 08:38:15 +040038Friday 2013, 08:38:15
0

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

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

ответил Dipesh Parmar 26 AMpFri, 26 Apr 2013 08:38:29 +040038Friday 2013, 08:38:29
0

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

ответил Bartek Bielawa 26 AMpFri, 26 Apr 2013 10:06:01 +040006Friday 2013, 10:06:01

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132