Html 为 <img> 标签分配一个类名而不是将它写在 css 文件中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16228845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Assign a class name to <img> tag instead of write it in css file?
提问by Qiqi Abaziz
I am curious to know, is it true that it is better to assign a class name to the <img>tag in the html file instead of writing it down directly into css file?
我很想知道，<img>在html文件中为标签分配一个类名而不是直接将其写到css文件中是不是更好？
<div class="column">
<img class="custom-style" alt="" />
<img class="custom-style" alt="" />
<img class="custom-style" alt="" />
</div>
instead of
代替
.column img{/*styling for image here*/}
I need to know is there any differences between of these in terms of web performance?
我需要知道这些在 Web 性能方面有什么区别吗？
UPDATE:
更新：
I'm sorry, supposely the question is multiple <img>tags inside the .column divand all the images are using the same styling.
对不起，假设问题是<img>里面有多个标签，.column div并且所有图像都使用相同的样式。
回答by Timidfriendly
The short answer is adding a class directly to the element you want to style is indeed the most efficient way to target and style that Element. BUT, in real world scenarios it is so negligible that it is not an issue at all to worry about.
简短的回答是直接向要设置样式的元素添加一个类确实是定位和设置该 Element 样式的最有效方法。但是，在现实世界的场景中，它是如此的微不足道，以至于根本不需要担心。
To quote Steve Ouders (CSS optimization expert) http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/:
引用 Steve Ouders（CSS 优化专家）http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/：
Based on tests I have the following hypothesis: For most web sites, the possible performance gains from optimizing CSS selectors will be small, and are not worth the costs.
基于测试，我有以下假设：对于大多数网站，优化 CSS 选择器可能带来的性能提升很小，不值得付出代价。
Maintainability of code is much more important in real world scenarios. Since the underlying topic here is front-end performance; the real performance boosters for speedy page rendering are found in:
在现实世界的场景中，代码的可维护性更为重要。由于这里的基础主题是前端性能；用于快速页面渲染的真正性能助推器位于：
- Make fewer HTTP requests
- Use a CDN
- Add an Expires header
- Gzip components
- Put stylesheets at the top
- Put scripts at the bottom
- Avoid CSS expressions
- Make JS and CSS external
- Reduce DNS lookups
- Minify JS
- Avoid redirects
- Remove duplicate scripts
- Configure ETags
- Make AJAX cacheable
- 减少 HTTP 请求
- 使用 CDN
- 添加一个过期标题
- Gzip 组件
- 将样式表放在顶部
- 将脚本放在底部
- 避免使用 CSS 表达式
- 使 JS 和 CSS 外部化
- 减少 DNS 查找
- 缩小JS
- 避免重定向
- 删除重复的脚本
- 配置 ETag
- 使 AJAX 可缓存
Source: http://stevesouders.com/docs/web20expo-20090402.ppt
资料来源：http: //stevesouders.com/docs/web20expo-20090402.ppt
So just to confirm, the answer is yes, example below is indeed faster but be aware of the bigger picture:
所以只是确认一下，答案是肯定的，下面的例子确实更快，但要注意更大的图景：
<div class="column">
<img class="custom-style" alt="appropriate alt text" />
</div>
回答by Francis Kim
It's just more versatile if you give it a class name as the style you specify will only apply to that class name. But if you exactly knowevery.column imgand want to style that in the same way, there's no reason why you can't use that selector.
如果您给它一个类名，它会更通用，因为您指定的样式仅适用于该类名。但是，如果您完全了解每个.column img并希望以相同的方式对其进行样式设置，则没有理由不使用该选择器。
The performance difference, if any, is negligible these days.
如今，性能差异（如果有）可以忽略不计。
回答by Osiris
Assigning a class name and applying a CSS style are two different things.
分配类名和应用 CSS 样式是两件不同的事情。
If you mean <img class="someclass">, and
如果你的意思是<img class="someclass">，并且
.someclass {
[cssrule]
}
, then there is no real performance difference between applying the css to the class, or to .column img
，那么在将 css 应用到类或将 css 应用到类之间没有真正的性能差异 .column img
回答by Dipesh Parmar
Its depend. If you have more than two images in .columnbut you only need some images to have css applied then its better to add class to image directly instead of doing .column img{/*styling for image here*/}
它的依赖。如果你有两个以上的图像，.column但你只需要一些图像来应用 css 那么最好直接将类添加到图像而不是做.column img{/*styling for image here*/}
In performance aspect i thing apply class to image is better because by doing so css will not look for possible child image.
在性能方面，我将类应用于图像更好，因为这样做 css 不会寻找可能的子图像。
回答by Bartek Bielawa
I think the Class on img tag is better when You use the same style in different structure on Your site. You have to decide when you write less line of CSS code and HTML is more readable.
我认为当您在您的网站上以不同的结构使用相同的样式时，img 标签上的类会更好。您必须决定何时编写更少的 CSS 代码行并且 HTML 更具可读性。
