内联样式vs类

在我的脑海中，我总是知道使用内联样式的类来处理任何项目。 但有没有任何文章/张贴/博客定义每个优点/缺点？ 我正在辩论这个问题，而且我似乎很难find我很久以前读过的博客文章。

Answer 1

有一个简单的原因。 CSS的要点是将内容（HTML）与演示文稿（CSS）分开。 这全是关于可访问性和代码重用 。

Answer 2

首先：

• 如果HTML是独立于整个网站devise（例如共享模板代码）而构build或生成的，那么添加合理命名的类和ID，仅与外部样式表链接。 使用足够的元素来允许任意的CSS操作。 例如，看CSS禅园 。 这适用于所有CMS，程序，脚本和其他dynamic生成的网站内容。 HTML输出必须完全不包含任何样式或布局。 没有例外。

假设你正在处理静态内容，那么：

• 如果有什么方法可以重用样式，请将其设置为类并链接到样式表。

• 如果没有办法重复使用样式（这是一个在其他地方没有意义的一次性事情），那么使用引用元素的#id的<style>块。

• 如果CSS属性只在周围的HTML的上下文中有意义（例如clear:一些用法），那么我将这个样式embedded到元素中。

很多人称之为异端，就像很多人谴责在现代编程语言中使用goto 。

但是，我的观点是，而不是订阅风格的教条，你应该根据你的情况select最能减less你的总体工作量的方法。 样式表添加了一个间接级别，使网站级别的更改变得简单，并有助于构build一致性。 但是，如果每个网页上只有一个地方使用了几十个课程，那么实际上增加了您的工作量，而不是减less它。

换句话说，不要因为别人告诉你这是正确的做法而做一些愚蠢和混乱的事情 。

Answer 3

如果select那里，我的第一select是类/其他select器。 但是，有些情况下内联样式是唯一的方法。 在其他情况下，只有一个CSS类本身需要太多的工作，而其他types的CSSselect器则更有意义。

假设你必须斑马条纹给定的列表或表格。 您可以简单地使用select器来完成这项工作，而不是对每个替代元素或行应用特定的类。 这将保持代码简单，但不会使用CSS类。 说明三种方式 ：

只使用类

 .alternate { background-color: #CCC; } <ul> <li>first</li> <li class="alternate">second</li> <li>third</li> <li class="alternate">fourth</li> </ul> 

使用类+结构select器

 .striped :nth-child(2n) { background-color: #CCC; } <ul class="striped"> <li>first</li> <li>second</li> <li>third</li> <li>fourth</li> </ul> 

使用内联样式

 <ul> <li>first</li> <li style="background-color: #CCC">second</li> <li>third</li> <li style="background-color: #CCC">fourth</li> </ul> 

第二种方式看起来是最便携和封装给我的。 要添加或删除任何给定的容器元素的striped ，只需添加或删除striped类。

但是，有些情况下内联样式不仅有意义，而且是唯一的出路。 当一组可能的值很大时，为每个可能的状态尝试提前上课都是愚蠢的。 例如，允许用户通过拖动dynamic地在屏幕上的任何位置放置某些项目的UI。 该项目必须绝对或相对实际的坐标，如：

 <div style="position: absolute; top: 20px; left: 49px;">..</div> 

当然，我们可以使用每个可能的位置div可以采取的类，但不build议。 人们可以很容易地看到为什么：

 .pos_20_49 { top: 20px; left: 49px; } .pos_20_50 { top: 20px; left: 50px; } // keep going for a million such classes if the container size is 1000x1000 px <div class="pos_20_49">..</div> 

Answer 4

使用常识。

每个人都知道，在理想的世界里，演示和内容应该分开。 大家也知道，这在很多时候都不太好。 我们都知道你应该使用div而不是表格来进行布局，但是我们也知道，对于任何你无法完全控制内容的情况，它都不能正常工作。

下载一个500k的样式表到一个元素的样式，因为你已经采取了所有可能的风格，并将其卡在样式表中将会杀死你的页面，下载500个更小的样式表来devise你的页面风格，因为你需要它们，也会杀死你的页面。

重用在概念上是伟大的，但现实是，它只在某些情况下有用。 这个概念同样适用于这个概念的任何地方。 如果你的项目做了你想做的事情，那么在每一个合理的浏览器中，这样做是有效的，而且是可靠的，那么你很好去，重构CSS比代码更难。

Answer 5

我想不出任何内联样式的优点。

CSS是关于渐进增强 ，而不是重复自己（DRY） 。

使用样式表，改变外观就像在HTML代码中改变一行一样简单。 出错或客户不喜欢这个改变？ 恢复到旧的样式表。

其他优点：

1. 您的网站可以自动调整到不同的媒体，如打印输出和手持设备。

2. 有条件的CSS修复，对于那个不得而知的gawd-awful 浏览器来说 ，会变得很简单。

3. 您的用户可以使用像“时尚”这样的插件轻松定制网站。

4. 您可以更轻松地重复使用或共享站点之间的代码。

Answer 6

我只能想到内联样式合适和/或合理的两种情况。

1. 如果内联样式以编程方式应用。 例如，使用JavaScript显示和隐藏元素，或在呈现页面时应用内容特定的样式（请参阅＃2）。

2. 如果内联样式在id不合适或不合理的情况下为单个元素完成类定义。 例如，为图库中的单个图像设置元素的background-image ：

HTML

 <div id="gallery"> <div class="image" style="background-image:url(...)">...</div> <div class="image" style="background-image:url(...)">...</div> <div class="image" style="background-image:url(...)">...</div> </div> 

CSS

 #gallery .image { background: none center center; } 

Answer 7

为了完成这个线程，值得一提的是，当您创buildHTML + CSS电子邮件时， 内联样式是GMail唯一的方法 。

有关详细信息，请参阅： http : //www.email-standards.org/clients/gmail/

Answer 8

假设你正在使用外部样式表，在前面提到的其他好处是caching。 浏览器将下载并caching样式表一次，然后每增加一次引用它就使用本地副本。 这使您的标记更加紧凑。 传输和parsing的较less标记意味着对用户的反应更快，体验更好。

Answer 9

内联样式肯定是要走的路。 只要看看http://www.csszengarden.com/ – 这是不可能的类和外部样式表 …

或等待…

Answer 10

类是可以添加到HTML元素的可重用样式。 例如-

 <style> .blue-text{color:Blue;} </style> 

你可以使用和重新使用这个蓝色文本类到任何HTML元素请注意，在你的CSS样式元素中，类应该以一个句点开始。 在你的HTML元素的类声明中，类不应该以句号开头。 而内联样式就像eg-

 <p style="color:Blue;">---</p> 

所以两者之间的区别是你可以重用类，而你不能重复使用内联样式。