将类名分配给<img/>标记而不是将其写入css文件中？

Question

我很想知道，将类名分配给html文件中的<img>标记而不是直接写入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标签，而且所有图片都使用相同的样式。

Answer 1

简短的回答是直接向要添加样式的元素添加一个类确实是目标和样式元素的最有效方法。但是，在现实世界的情况下，它是如此微不足道，以至于根本不担心这个问题。

引用Steve Ouders（CSS优化专家）http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/：

  

基于测试，我有以下假设：对于大多数网站，   优化CSS选择器可能带来的性能提升   很小，并不值得花费。

在现实世界的场景中，代码的可维护性更为重要。 由于这里的基本主题是前端性能;快速页面渲染的真正性能提升器可在以下位置找到：

• 减少HTTP请求数
• 使用CDN
• 添加过期标题
• Gzip组件
• 将样式表置于顶部
• 将脚本放在底部
• 避免使用CSS表达式
• 使JS和CSS外部
• 减少DNS查找
• Minify JS
• 避免重定向
• 删除重复的脚本
• 配置ETags
• 使AJAX可缓存

来源：http://stevesouders.com/docs/web20expo-20090402.ppt

所以只是为了确认，答案是肯定的，下面的例子确实更快，但要注意更大的图景：

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

Answer 2

如果你给它一个类名，它会更通用，因为你指定的样式只适用于那个类名。 但如果您确切地知道 每个 .column img并希望以相同的方式设置样式，则没有理由不能使用该选择器。

如今，性能差异可以忽略不计。

Answer 3

分配类名和应用CSS样式是两回事。

如果您的意思是<img class="someclass">，那么

.someclass {
  [cssrule]
}

，然后将css应用于课程或.column img

之间没有真正的性能差异

Answer 4

它的依赖。如果您在.column中有两个以上的图片但是您只需要一些图片来应用css，那么最好直接将图片添加到图片而不是.column img{/*styling for image here*/}

在性能方面，我对图像应用类更好，因为这样做css不会寻找可能的子图像。

Answer 5

我认为当您在网站上的不同结构中使用相同的样式时，img标签上的Class会更好。您必须决定何时编写较少的CSS代码行，并且HTML更具可读性。