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

当前回答

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

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

其他回答

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

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

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

<div class="pageheader">  

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

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

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

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

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

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

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