当我看到网站的初始代码和示例时,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" />

当前回答

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

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

其他回答

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

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

这样一个服务系统可能做的优化的不完整列表是: 将图像引用替换为符合查看器视口大小的图像。 内联图像在折页上方可见。 内联CSS变量。 预加载扩展组件。 精简HTML和CSS。

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

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

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

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

一旦你有了它,并使用它在你的“head”标签中提供“style”标签,“关注点分离”参数就消失了,取而代之的是“我们必须在对模板的每次更改后重新生成”和“我们必须从它生成的内容中调试模板”。自从第一种计算机语言获得预处理器(或者有人开始使用M4)以来,这些抱怨就一直存在。

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

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

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