内联CSS有什么不好的地方？

170

当我看到网站入门代码和示例时，CSS始终位于单独的文件中，命名为“ main.css”，“ default.css”或“ Site.css”。但是，当我编写页面代码时，经常会想将CSS与DOM元素一起插入行内，例如在图像上设置“ float：right”。我觉得这是“错误的编码”，因为在示例中很少这样做。

我知道，如果将样式应用于多个对象，则遵循“不要重复自己”（DRY）并将其分配给每个元素要引用的CSS类是明智的。但是，如果我不想在另一个元素上重复CSS，为什么在编写HTML时不内联CSS？

问题：即使仅在该元素上使用内联CSS是否也被认为是不好的？如果是这样，为什么？

示例（这不好吗？）：

<img src="myimage.gif" style="float:right" />
css  inline-styles 
— 国际象棋
source
1
我一直反对使用内联CSS，即使是单个项目，但我看到如此多的商业网站充斥着样式属性，这让我想知道实际上是什么惯例？
— yu_ominae 2012年
3
我认为内联样式是懒惰的。我之所以这样说，是因为我自己经常这样做，所以我知道-为什么-我正在这样做，因为我不知道样式是否会保留，因此我曾经在html旁边做。如今，借助html5和在任何地方对<style> </ style>的实用支持，我在混乱布局时使用附近的<style>标记，然后将其迁移到core / main css文件中。速度和即时性的优点相同，几乎没有缺点（由于特异性是对页面外元素的副作用）。
— 2013年
3
@yu_ominae-请记住，“商业网站”并不总是遵循最佳做法；其实是很少见的。决定因素是开发商是否知道，关心并有时间；或者经理是否愿意分配时间并指示员工实施。当工作优先级要在截止日期之前完成时，质量通常会降低。
— BryanH 2014年
1
值得注意的是，尽管“商业站点”似乎正在使用内联样式，但这可能是由于使用了某些css()应用内联样式的jQuery调用（例如）的结果。
— 戴夫·贝克尔

Answers:

203

要使站点看起来不同，必须更改100行代码。这可能不适用于您的示例，但是如果您将内联CSS用于类似

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

在每个页面上表示一个页面标题，将易于维护，因为

<div class="pageheader">

如果pageheader是在单个样式表中定义的，那么，如果要更改页面标题在整个网站上的显示方式，则可以在一处更改css。

但是，我将成为一个异端，说在您的示例中，我认为没有问题。您的目标是单个图像的行为，该行为可能必须在单个页面上正确显示，因此将实际的CSS放在样式表中可能会显得过大。

— 大卫
source
18
您说我的例子没问题，但您也承认自己是异端。我喜欢这种方法。
— ChessWhiz 2010年
8
如果我每次都要修改图像的浮点数或其他一些原本仅用于“一个元素”的css的镍，那么……我会出去吃晚饭在一家不错的餐厅。
— 2013年
8
不仅可以使用内联样式设置，而且可以设置任何样式的唯一方法的另一种情况是：HTML电子邮件。
— Christophe Marois
但是html文件本身也被缓存。
响应user663031：具有多个页面的网站具有许多不同的HTML页面，但是可以将所有样式组合在一个可以轻松缓存的CSS文件中。
— Sinthorion
68

使用不同的CSS文件的优点是

  1. 易于维护您的html页面
  2. 更改外观将很容易，您可以在页面上获得许多主题的支持。
  3. 您的css文件将被缓存在浏览器端。因此，每次刷新页面或用户浏览您的网站时，您不会加载一些kbs的数据，这将对Internet流量有所帮助。
— vijay.shad
source
2
我问自己这个问题，大约每个月（这对Web编程来说是新的），这是我第一次阅读有关正在缓存的CSS文件的任何信息。就在那里为我做到了！
— ganders 2014年
我也考虑过缓存，但就我而言，我不得不处理合并的CSS（15k行），不可能保留所有垃圾邮件的大部分，而垃圾邮件只能在单个页面上使用一次，而不会不再存在。因此，您每次访问时都会向每个人抛出CSS代码，因此只有一个访问量的1％可以访问该页面。我不确定在每种情况下互联网流量的论点是否有效。幸运的是，Web组件将改变一切！
— Shadoweb '16
@Shadowbob-使用较小的CSS文件而不是较大的CSS文件会更好吗？可能有一个通用样式可用于所有页面，但是对于其他页面则有较小的单独样式表。应该更容易维护。如果交通问题，那么在构建过程中，生产可能会合并为一个。
— Darius.V，
26

html5快速CSS原型制作方法

或：<style>标记不再仅仅是头部！

黑客CSS

假设您正在调试，并且想要修改page-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页面的另一个很好用处，因此您可以在重构时直接剥离内联css，并将其立即放在类，id或选择器中的页面上。如果您在选择器时非常谨慎，则可以仅通过复制和粘贴将最终结果移到最后的全局CSS文件中。

立即将所有 CSS 转移到全局CSS文件有点困难，但是有了页内<style>元素，我们现在有了替代方法。

— q
source
23

除了其他答案。国际化。

根据内容的语言-您通常需要调整元素的样式。

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

假设您使用了代码：

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

现在说您要您的网站支持rtl语言-您将需要：

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

因此，现在，如果您想同时支持两种语言，则无法使用内联样式为浮点型赋值。

使用CSS可以很容易地通过lang属性来解决

因此，您可以执行以下操作：

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

演示版

— 丹尼尔
source
16

内联CSS始终会始终优先于任何链接样式表CSS。如果您何时编写正确的级联样式表，并且属性没有正确应用，这可能会给您造成极大的头痛。

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

最后，假设您有20个图像标签。当您决定将其浮动时会发生什么？

— 伊莎玛丽曾
source
12
“总是，永远赢”-除非在样式表中使用！important
— James Westgate
6
我的生活假设是人道的，不使用这种怪物。=）
— 伊莎·玛丽·曾格
3
@JamesWestgate，直到有人在内联css中使用！important覆盖覆盖....
— Kzqai 2013年
11

CSS的重点是将内容与其表示分开。因此，在您的示例中，您正在将内容与演示结合在一起，这可能“被认为是有害的”。

7
我付给您5美元，向ACM提交“被认为有害的内联CSS样式”。
— BalinKingOfMoria恢复CM 2015年
11

使用内联CSS很难维护。

对于要更改的每个属性，使用内联CSS都要求您查找相应的HTML代码，而不是仅查看定义明确且希望结构良好的CSS文件。

— 西尔万
source
3
+1-当我们的设计师快速解决这一问题时，我真的很伤心，只是想找点东西。使用外部CSS应该意味着永远不必进行大量文本替换，除非当然要在单个样式表上进行操作。我昨天获得了一个控制面板模板，花了2 1/2个小时才能找到实例，这些实例中的图标已用内联样式进行了调整。疯狂，我告诉你..疯狂:)
— 蒂姆·波斯特
1
当您有50个以上的SCSS并且您的Inspect元素仅指向压缩的CSS时，我不确定简单性会赢得CSS！
— Shadoweb '16
1
@Shadowbob就是源地图的用途。thesassway.com/intermediate/using-source-maps-with-sass
— Mike Chamberlain
@TimPost有一个“检查元素”功能诞生的原因
— Norielle Cruz
9

这仅适用于手写代码。如果您生成代码，我认为可以在此处偶尔使用内联样式，尤其是在元素和控件需要特殊对待的情况下。

对于手写代码，DRY是一个很好的概念，但是在机器生成的代码中，我选择“ Demeter法则”：“什么东西在一起，必须在一起”。与在另一个“远程” CSS文件中第二次编辑全局样式相比，处理生成样式标签的代码要容易得多。

您问题的答案：这取决于...

— 布鲁诺·詹尼希（Bruno Jennrich）
source
7
我认为这确实是正确的答案。“关注分离”的口头禅只是一个标准。“局部性”对于易于维护也很重要。关键方面是样式是否可以在语义级别上重用，而不仅仅是语法上的。如果是这样，那么工作表就很有意义。例如，我不会因为两个元素使用它而为“ float：right”创建一个类。它取决于语义上相同的元素。“颜色”样式通常在语义上相关（主题的一部分），通常会放在表格中。
— koriander 2015年
5

我认为，即使您希望为一个元素使用某种样式，也必须考虑是否可能要在不同页面的同一元素上应用相同样式。

有一天，有人可能会要求更改或在每个页面上的同一元素上添加更多的样式更改。如果您在外部CSS文件中定义了样式，则只需在此进行更改，并且更改将反映在所有页面的同一元素中，从而省去您的麻烦。:-)

— 阿什什·古普塔（Ashish Gupta）
source
4

以您喜欢的方式进行编码，但是如果将其传递给其他人，则最好使用其他人所做的事情。有CSS的原因，然后有内联的原因。我两者都用，因为它对我来说更容易。当您有很多相同的重复时，使用CSS会很棒。但是，当您有一堆具有不同属性的不同元素时，这将成为问题。对我来说，一个例子是在页面上放置元素时。每个元素作为不同的top和left属性。如果我把所有这些放到CSS中，那将使html和CSS页面之间的混乱一团糟。因此，当您希望所有内容都具有相同的字体，颜色，悬停效果等时，CSS就是很棒的选择。但是，当所有内容都具有不同的位置时，为每个元素添加一个CSS实例确实很麻烦。不过那只是我的意见。当您不得不探究代码时，CSS确实与大型应用程序息息相关。使用Mozilla Web开发人员插件，它将帮助您找到元素ID和类。

— 诺亚海滩
source
1

使用内联样式违反了关注分离原则，因为您在同一源文件中有效地混合了标记和样式。在大多数情况下，它也违反了DRY（请勿重复自己）原则，因为它们仅适用于单个元素，而一个类可以应用于其中的多个元素（甚至可以通过CSS规则的魔术来扩展！ ）。

此外，如果您的站点包含脚本，则明智地使用类是有益的。例如，一些流行的JavaScript库（例如JQuery）在很大程度上依赖于类作为选择器。

最后，使用类为您的DOM增添了清晰度，因为您实际上具有描述符来告诉您给定节点是哪种元素。例如：

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

比以下内容更具表现力：

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

页内CSS是目前的热门话题，因为Google认为它比从单独文件加载的CSS具有更好的用户体验。一种可能的解决方案是将css放在文本文件中，用php快速加载它，然后将其输出到文档头中。在此<head>部分中包括：

<head> ...

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

... </head>

将所需的css放入styles / style1.txt中，它将在<head>文档部分中消失。这样，您将拥有页内CSS，可以使用样式模板style1.txt，该模板可以被任何页面和所有页面共享，从而允许仅通过一个文件进行站点范围的样式更改。此外，此方法不需要浏览器从服务器请求单独的CSS文件（从而最大程度地减少了检索/渲染时间），因为所有内容均由php一次交付。

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

— 罗杰·史蒂文斯
source
是! 如果您所有的CSS都在文件中，则这对于尝试最大程度地减少“首次绘制时间”至关重要，它将使DOM推迟到用户下载样式表之后。将关键样式放在头部的内联<styles>节点中，您可以立即开始渲染DOM并推迟外部样式表。在〜3G连接和感知速度方面起着很大的作用。+1为您的答案
— DOfficial
1

内联CSS适用于机器生成的代码，当大多数访问者仅浏览网站上的一页时，效果很好，但它不能做的一件事就是处理媒体查询，以允许不同尺寸的屏幕看起来不同。为此，您需要在外部样式表或内部样式标签中包含CSS。

0

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

外部CSS文件导致对浏览器的一个额外的HTTP调用，从而导致额外的延迟。相反，如果将CSS内联插入，则浏览器可以立即开始对其进行解析。尤其是通过SSL时，HTTP调用成本更高，并且会增加页面的额外延迟。有许多工具可通过将外部CSS文件作为内联代码插入来帮助生成静态HTML页面（或页面摘要）。这些工具用于生成生产二进制文件的“构建”和“发布”阶段。这样，我们可以获得外部CSS的所有优势，并且页面变得更快。

— Diptendu
source
3
您错过了一些重新：延迟。实际上，这是一个更大的问题：嵌入CSS意味着每个页面请求都必须包含该CSS，否则，浏览器可以对其进行缓存。
— Andrew Barber 2014年
你是对的。这就是为什么我们在代码大小很小时内联CSS的原因，这样它就不会在页面大小上造成太多开销。关于Yahoo!有一篇非常有趣的文章。Perf准则页面developer.yahoo.com/performance/rules.html上说，每天有60-80％的用户使用空的缓存访问您的网站（yuiblog.com/blog/2007/01/04/performance-research-part -2）当然，这完全取决于网站的受欢迎程度-网站越受欢迎，拥有非空缓存的机会就越大。
— 2014年
尽管用户可能使用空缓存访问您的网站，但他们不太可能使用空缓存访问您的页面。除非页面是一次性的（即每个用户只能浏览一次），否则使用单独的css文件将获得更好的效果。
— astex 2015年
如今，许多现代网页被设计为“单页应用程序”，整页仅在第一次加载。下次以后，将通过AJAX调用来更改页面。因此，即使页面被多次使用，外部CSS也只会被加载一次。
— 2015年
0

根据AMP HTML规范，出于性能目的，有必要将CSS放在HTML文件中（相对于外部样式表）。这并不意味着内联CSS，但它们并未指定外部样式表。

此类服务系统可能会进行的优化的不完整列表是：

  • 将图像参考替换为与查看者视口大小相同的图像。
  • 折叠上方可见的嵌入式图像。
  • 内联CSS变量。
  • 预加载扩展组件。
  • 缩小HTML和CSS。
— 罗尼·罗斯顿
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.