当我看到网站的初始代码和示例时,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要求您查找相应的HTML代码,而不是只在定义清晰且结构良好的CSS文件中查找。

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

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

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

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

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

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

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

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

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

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

表达能力比:

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