内联CSS有什么不好?

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

我明白，如果样式将应用于多个对象，明智的做法是遵循“不要重复自己”(Don't Repeat Yourself, DRY)，并将其分配给每个元素引用的CSS类。然而，如果我不会在另一个元素上重复CSS，为什么不内联CSS，因为我写HTML?

问题是:使用内联CSS被认为是不好的，即使它只用于该元素?如果有，为什么?

例子(这样不好吗?)

<img src="myimage.gif" style="float:right" />
106681 次浏览
小开

使用内联CSS更难维护。

对于您想要更改的每个属性，使用内联CSS要求您查找相应的HTML代码，而不是只在定义清晰且结构良好的CSS文件中查找。

小开
最佳答案

当你想让网站看起来不一样时，不得不修改100行代码。这可能不适用于你的例子，但如果你使用内联css的事情

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

在每个页面上表示一个页眉，这样维护起来会容易得多

<div class="pageheader">

如果pageheader定义在一个单独的样式表中，那么如果你想改变整个站点的页面header的外观，你只需在一个地方更改CSS。

然而，我要说的是，在你的例子中，我认为没有问题。您针对的是单个图像的行为，它可能必须在单个页面上显示正确，因此将实际的css放在样式表中可能会过度。

小开

我认为，即使您希望对一个元素具有某种样式，也必须考虑到可能希望对不同页面上的同一元素应用相同样式的可能性。

有一天，有人可能会要求对每页上的同一元素进行更多的风格更改。如果您在外部CSS文件中定义了样式，那么您只需在那里进行更改，并且它将反映在所有页面的相同元素中，从而为您省去了麻烦。: -)

小开

内联CSS总是优先于任何链接样式表CSS。如果您编写了一个合适的级联样式表，而您的属性没有正确应用，这会让您非常头疼。

它还在语义上损害了应用程序:CSS是关于将表示与标记分离的。当您将两者纠缠在一起时，事情就变得更加难以理解和维护。这与在服务器端将数据库代码与控制器代码分离的原理类似。

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

小开

即使你只在这个例子中使用了一次样式，你仍然混合了CONTENT和DESIGN。查找“关注点分离”。

小开

CSS的全部意义在于将内容与其表示分开。所以在你的例子中，你把内容和表现形式混在一起了，这可能是“有害的”。

小开

使用不同的css文件的好处是

  1. 易于维护您的html页面
  2. 更改外观和感觉将很容易，您可以在您的页面上支持许多主题。
  3. 您的css文件将缓存在浏览器端。因此，你将贡献一点互联网流量，不加载一些kbs的数据，每次一个页面刷新或用户导航你的网站。
小开

按照你喜欢的方式编码，但如果你要把它传递给其他人，最好使用其他人都在做的事情。有使用CSS的原因，也有使用内联的原因。我两者都用，因为这对我来说更容易。当你有很多相同的重复时，使用CSS是很棒的。然而，当你有一堆具有不同属性的不同元素时，这就成了一个问题。举个例子，当我在页面上定位元素时。每个元素作为不同的top和left属性。如果我把所有这些都放在CSS中，那真的会让我在html和CSS页面之间心烦意乱。所以当你想要所有东西都有相同的字体、颜色、悬停效果等时，CSS是很棒的。但是当所有元素都有不同的位置时，为每个元素添加CSS实例确实是一件痛苦的事情。这只是我个人的观点。在大型应用程序中，当你不得不在代码中挖掘时，CSS确实有很大的相关性。使用Mozilla web开发插件，它将帮助您找到元素id和类。

小开

快速css原型的html5方法

或:<style>标签不再只是头部任何更多!

黑客CSS

假设您正在调试，并希望修改页面css，使某个部分看起来更好。您可以像我现在所做的那样，采用分阶段的方法，而不是快速、肮脏和不可维护的方式来创建您的内联样式。

没有内联样式属性

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

用<style>代替原型

在使用内联css的地方，应该使用页内<style>元素。试试吧!它在所有浏览器中都能很好地工作，所以非常适合测试，但允许你优雅地将这样的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，你必须重构它。这是<style> in page的另一个重要用途，这样当你重构时，你可以直接剥离内联css并立即将其放在页面的类、id或选择器中。如果你对你的选择器足够小心，你可以在最后移动最终结果到全局css文件中，只需要复制&粘贴。

立即将每一个位css文件传输到全局css文件有点困难，但有了页面内的<style>元素，我们现在有了替代方案。

小开

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

对于手写代码来说，DRY是一个很好的概念，但对于机器生成的代码，我选择了“得墨忒耳定律”:“属于一起的东西必须保持在一起”。操作生成Style标签的代码比在不同的“远程”CSS文件中第二次编辑全局样式要容易得多。

你问题的答案是:视情况而定……

小开

除了其他答案....国际化< a href = " http://en.wikipedia.org/wiki/Internationalization_and_localization " > < / >。

根据内容语言的不同，通常需要调整元素的样式。

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

假设你使用你的代码:

<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;
}

演示< a href = " http://jsfiddle.net/danield770/z7uXf/ " > < / >

小开

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

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

小开

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

此外，如果站点包含脚本，明智地使用类是有益的。例如，一些流行的JavaScript库(如JQuery)严重依赖类作为选择器。

最后，使用类可以增加DOM的清晰度，因为可以有效地使用描述符告诉您其中给定节点是哪种元素。例如:

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

表达能力比:

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

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

<head> ...


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


... </head>

将所需的css放在styles/style1.txt中，它将在文档的<head>部分中输出。这样，你就可以使用样式模板style1.txt，它可以被任何和所有页面共享，允许站点范围内的样式更改仅通过一个文件进行。此外，这种方法不需要浏览器从服务器请求单独的css文件(从而最小化检索/呈现时间)，因为所有内容都是由php一次性交付的。

实现此功能后，可以在需要的地方手动编码单独的一次性样式。

小开

内联CSS适用于机器生成的代码，在大多数访问者只浏览站点上的一个页面时也可以，但它不能处理媒体查询以允许不同大小的屏幕具有不同的外观。为此，您需要在外部样式表或内部样式标记中包含CSS。

小开

根据AMP HTML规范，为了性能目的，有必要将CSS放在HTML文件中(而不是外部样式表)。这并不意味着内联CSS，而是它们没有指定外部样式表。

这样一个服务系统可能做的优化的不完整列表是:

  • 将图像引用替换为符合查看器视口大小的图像。
  • 内联图像在折页上方可见。
  • 内联CSS变量。
  • 预加载扩展组件。
  • 精简HTML和CSS。
小开

除了其他答案，你不能针对内联CSS中的伪类或伪元素

小开

我们已经创建了一个模板驱动的工件生成器，它为任何类型的文本工件——HTML、XML、计算机语言、非结构化文本、DSV等——提供了包含文件的功能(例如，它非常适合处理普通Web或手动页面的页眉和页脚，而无需脚本)。

一旦你有了它，用它来提供“风格”;标签在你的“头”里;标签，“关注点分离”;参数消失，被替换为“我们必须在每次更改模板后重新生成”;并且“我们必须根据它生成的内容调试模板”。自从第一种计算机语言获得预处理器(或者有人开始使用M4)以来，这些抱怨就一直存在。

总的来说，我们认为CSS文件或“样式”的元化能力。标签比元素级样式更简洁，更不容易出错。但这确实需要一些专业判断，所以新手和散漫的人不必费心。

小开

除了其他答案，另一个问题是它违反了MDN https://infosec.mozilla.org/guidelines/web_security#content-security-policy推荐的内容安全策略

他们使用的理由是内联javascript是有害的，XSS等等，但这并不能证明为什么内联样式也应该被禁用。也许有人会评论其中的原因，但在此之前，我将只依赖于对权威的呼吁并声明:避免内联样式是安全的最佳实践。

小开

就我个人而言，我认为对内联css的憎恨是荒谬的。硬核邪教行为，人们只是不好意思地重复“分离关注”。是的,有时候,如果有重复元素,你将需要重复样式使用类目标从一个CSS文件,但是大多数时候它可以提高开发速度和清晰的代码内联风格,很高兴如果我可以查看代码,发现有一个定制的利润率高,它帮助我照片HTML文档作为一个整体,而不是一些命名类,给我小洞察风格将被应用。

所以在这里我要做一个逆向的人，我要说内联css是伟大的，那些对你使用它大喊大叫的人只是在遵循他们被告知的东西，而实际上并没有给予任何原始的、公正的考虑。


提交答案