代码之家 › 专栏 › 技术社区 › ChessWhiz

内联CSS有什么坏处?

inline-styles css

149

ChessWhiz · 技术社区 · 14 年前

当我看到网站启动代码和示例时,CSS总是在一个单独的文件中,命名为“main.css”、“default.css”或“site.css”。但是,当我在编写页面代码时,我经常会试图将CSS与一个DOM元素放在一起,例如在图像上设置“float:right”。我觉得这是“糟糕的编码”,因为在示例中很少这样做。

我知道如果样式将应用于多个对象,那么最好遵循“不要重复自己”(dry),并将其分配给一个CSS类以供每个元素引用。但是,如果我不在另一个元素上重复CSS,为什么不在编写HTML时将CSS排成一行呢?

问题是:使用内嵌的css是否被认为是不好的,即使它只用于该元素?如果是,为什么?

示例(这不好吗?):

<img src="myimage.gif" style="float:right" />

16 回复 | 直到 6 年前

187

David 14 年前

当你想让网站看起来与众不同的时候,必须修改100行代码。这在您的示例中可能不适用,但是如果您正在为类似的事情使用内联CSS

<div style ="font-size:larger; text-align:center; font-weight:bold">

在每一页上表示一个页头,将更容易维护为

<div class="pageheader">

如果页面标题是在单个样式表中定义的,因此如果要更改页面标题在整个网站中的外观,可以在一个位置更改CSS。

然而,我将是一个异教徒,在你的例子中,我认为没有问题。您的目标是单个图像的行为,它可能必须在单个页面上看起来正确,因此将实际的CSS放入样式表中可能会有点过分。

m3kh 14 年前

拥有不同的CSS文件的好处是

易于维护HTML页面
改变外观和感觉很容易,你可以在你的页面上支持许多主题。
您的CSS文件将缓存在浏览器端。因此,每次刷新页面或用户浏览您的站点时,您都不会加载一些kbs的数据,从而在Internet流量上做出一点贡献。

Kzqai 8 年前

快速CSS原型的HTML5方法

或: <style> 标签不再只是针对头部了!

黑客攻击CSS

假设您正在调试,并且希望修改页面CSS,使某个部分看起来更好。你可以做我这些天做的事情,采取分阶段的方法,而不是以快速、肮脏和不可维护的方式来创建你的风格。

没有内联样式属性

永远不要创建内嵌的CSS,我的意思是: <element style='color:red'> 甚至 <img style='float:right'> 它非常方便,但在以后的实际CSS文件中并不能反映实际的选择器的特殊性,如果保留它,您将后悔以后的维护负载。

原型 `<风格& GT;` 相反

如果使用内联CSS,则在页面中使用 <风格& GT; 元素。试试看!它在所有浏览器中都可以正常工作,因此非常适合测试,但允许您在需要/需要时将此类CSS优雅地移到全局CSS文件中!(*请注意,选择器将只具有页面级别的特异性,而不是站点级别的特异性,因此请注意不要太笼统)与CSS文件一样干净:

<style>
.avatar-image{
    float:right
}
.faq .warning{
    color:crimson;
}
p{
    border-left:thin medium blue;
    // this general of a selector would be very bad, though.
    // so be aware of what'll happen to general selectors if they go
    // global
}
</style>

重构其他人的内联CSS

有时你甚至不是问题所在,你在处理别人的内联CSS,你必须重构它。这是另一个很好的用途 <风格& GT; 在页面中,这样您就可以直接除去内联CSS,并在重构时立即将其放在类、ID或选择器中的页面上。如果您在使用选择器时足够小心,那么可以将最终结果移动到末尾的全局CSS文件中,只需复制粘贴即可。

转移有点困难 每一个 一点CSS立即转到全局CSS文件,但在页面中 <风格& GT; 元素,我们现在有了替代品。

Danield 10 年前

除了其他答案… Internationalization .

取决于内容的语言-您通常需要调整元素的样式。

一个明显的例子是从右向左的语言。

假设您使用了您的代码:

<img src="myimage.gif" style="float:right" />

现在假设您希望您的网站支持RTL语言-您需要:

<img src="myimage.gif" style="float:left" />

所以现在,如果您想支持这两种语言,就没有办法使用内联样式为float赋值。

使用CSS,可以很容易地处理lang属性

所以你可以这样做:

img {
  float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
  float:left;
}

Demo

issa marie tseng 14 年前

内联CSS总是,总是比任何链接样式表的CSS优先。如果你去写一个合适的级联样式表,而你的属性没有正确应用,这会给你带来巨大的麻烦。

这也会在语义上伤害您的应用程序:CSS是关于分离表示和标记的。当你把两者结合在一起时,事情就变得更难理解和维持了。这与在服务器端将数据库代码与控制器代码分离类似。

最后,假设您有20个图像标签。当你决定它们应该向左浮动时会发生什么?

user313351 14 年前

CSS的全部目的是将内容与其表示分离。因此,在您的示例中,您将内容与演示混合在一起,这可能是“有害的”。

BryanH Philipp Andreychev 10 年前

使用内联CSS很难维护。

对于您要更改的每个属性,使用内联CSS需要您查找相应的HTML代码,而不是只查看定义明确、结构良好的CSS文件。

Community Neeleshkumar S 6 年前

这只适用于手写代码。如果您生成代码,我认为偶尔使用内联样式是可以的,特别是在元素和控件需要特殊处理的情况下。

dry是手写代码的一个好概念,但在机器生成的代码中,我选择了“demeter法则”:“什么属于一起,必须呆在一起”。与在不同的“远程”CSS文件中再次编辑全局样式相比,更容易操作生成样式标记的代码。

你的问题的答案是:这取决于…

Noah Beach 13 年前

编码你喜欢的编码方式,但是如果你把它传递给其他人,最好使用其他人做的事情。有CSS的原因,然后有内联的原因。我两者都用,因为这对我来说比较容易。当你有很多相同的重复时,使用CSS是很好的。然而,当你有一堆具有不同属性的不同元素时,这就成了一个问题。对于我来说,一个例子是当我在页面上定位元素时。每个元素都是不同的左上角属性。如果我把这些都放在一个CSS中,这会让我在HTML和CSS页面之间的混乱变得很恼火。所以当你想要所有的东西都有相同的字体、颜色、悬停效果等时,CSS是很好的。但是当所有的东西都有不同的位置时,为每个元素添加一个CSS实例确实是一件痛苦的事。不过,这只是我的意见。当你需要挖掘代码时,CSS在更大的应用程序中确实有很大的相关性。使用MozillaWebDeveloper插件,它将帮助您找到元素ID和类。

Community Neeleshkumar S 6 年前

我认为,即使您想要为一个元素使用某种样式,您也必须考虑在不同的页面上对同一个元素应用相同样式的可能性。

有一天,有人可能会要求对每个页面上的同一个元素进行更改或添加更多的样式更改。如果您在一个外部CSS文件中定义了样式,那么您只需要在那里进行更改,并且它将反映在所有页面中的同一个元素中,从而避免了您的头疼。-)

Ian Mercer 14 年前

即使像本例中那样只使用一次样式,您仍然混合了内容和设计。查找“关注点分离”。

csvan 8 年前

使用内联样式违反了关注点分离原则,因为您在同一个源文件中有效地混合了标记和样式。在大多数情况下,它也违反了dry(不要重复自己)原则,因为它们只适用于一个元素,而一个类可以应用于其中的几个元素(甚至可以通过CSS规则的魔力进行扩展!).

此外,如果您的站点包含脚本,明智地使用类是有益的。例如,一些流行的javascript库(如jquery)在很大程度上依赖于类作为选择器。

最后,使用类为您的DOM增加了更多的清晰度,因为实际上您有描述符告诉您给定节点中的元素是什么类型的。例如:

<div class="header-row">It's a row!</div>

比以下更具表现力:

<div style="height: 80px; width: 100%;">It's...something?</div>

Roger Stevens 8 年前

页面内的CSS是目前最流行的东西,因为谷歌认为它比从单独文件加载的CSS提供更好的用户体验。一种可能的解决方案是将CSS放到文本文件中,用PHP动态加载它,并将其输出到文档头中。在 <head> 部分包括:

<head> ...

<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>

... </head>

将所需的CSS放入styles/style1.txt,它将在 <头& 文档的节。这样,您就可以在页面CSS中使用样式模板STYLE1.TXT,它可以由任何页面和所有页面共享,从而允许仅通过一个文件对网站范围内的样式进行更改。此外,这种方法不需要浏览器从服务器请求单独的CSS文件(这样可以减少检索/呈现时间),因为所有东西都是由PHP一次性提供的。

实现了这一点后,可以在需要时手动对单独的一次性样式进行编码。

user6402310 8 年前

内联CSS对于机器生成的代码很好,当大多数访问者只浏览一个站点上的一页时也可以,但它不能做的一件事是处理媒体查询,以允许对不同大小的屏幕进行不同的查找。为此,您需要将CSS包含在外部样式表或内部样式标记中。

Diptendu 10 年前

尽管我完全同意上面给出的所有答案,但在单独的文件中编写CSS与代码的可重用性、可维护性、更好的关注点分离总是更好的。在许多情况下,人们在生产代码中更喜欢内联CSS-

外部CSS文件导致对浏览器的额外HTTP调用,从而导致额外的延迟。相反,如果CSS是以内联方式插入的,那么浏览器可以立即开始分析它。尤其是通过ssl http调用成本更高,会增加页面的延迟。有许多工具可以通过插入外部CSS文件作为内联代码来帮助生成静态HTML页面(或页面片段)。这些工具用于生成生产二进制文件的构建和发布阶段。这样我们就获得了外部CSS的所有优势,并且页面也变得更快。

Ronnie Smith 6 年前

根据 AMP HTML Specification 为了提高性能,有必要将CSS放入HTML文件(而不是外部样式表)。这并不意味着内联CSS,但 they do specify no external stylesheets .