将类名分配给< img>标签而不是在css文件中写入？ [英] Assign a class name to <img> tag instead of write it in css file?

问题描述

我很想知道，是否更好地为html文件中的< img> 标签指定类名，而不是写下直接进入css文件？

 < div class =column> 
< img class =custom-stylealt =/> 
< img class =custom-stylealt =/> 
< img class =custom-stylealt =/> 
< / div> 
  

而不是

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

知道在网络效果方面有什么区别吗？

更新：

很抱歉，假设问题是 .column div 中有多个< img> 所有图片都使用相同的样式。

解决方案

简单的答案是直接添加一个类到你想要风格的元素确实是最有效的方式来定义和风格的元素。但是，在现实世界的情况下，它是如此微不足道，它不是一个问题，所有的担心。

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

基于测试我有以下假设：对于大多数网站，
从优化CSS选择器可能的性能增益将是
小，并且不值得花费。

代码的可维护性在现实世界的场景中更为重要。
因为这里的基本主题是前端性能;用于快速页面呈现的真正的性能增强可以在下面找到：

• 减少HTTP请求


• 使用


• 添加到期标题


• 添加到期标题


• 将脚本放在底部


• 避免使用CSS表达式


• 使JS和CSS外部


• 减少DNS查找


• 缩小JS


• 避免重新导向


• 
  
• 配置ETags


• 使AJAX可缓存

href =http://stevesouders.com/docs/web20expo-20090402.ppt> http://stevesouders.com/docs/web20expo-20090402.ppt

只是为了确认，答案是肯定的，下面的例子确实更快，但要意识到更大的图片：

 < div class =column> 
< img class =custom-stylealt =适当的替代文字/> 
< / div> 
  

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?

<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?

UPDATE:

I'm sorry, supposely the question is multiple <img> tags inside the .column div and all the images are using the same styling.

解决方案

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.

To quote Steve Ouders (CSS optimization expert) 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.

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

Source: 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>

这篇关于将类名分配给< img>标签而不是在css文件中写入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！