为什么在HTML中使用style属性是不好的？

Question

为什么在HTML中使用style属性是不好的？

17

我被告知，以及阅读过，使用html中的style属性被认为是不好/粗糙/不良的做法。此外，所有特定于呈现的位应分离到css和其他适当的部分中。我试图理解为什么会这样。我可以理解为什么你可能希望保持HTML纯语义DOM，它描述了文档的结构，但对于实际页面来说，重要的是页面看起来正确并且功能适当。这种分离是否有更有说服力的原因？

- meawoppl

因此，如果您的设计或结构发生变化，您不必更新另一半（设计或结构）。今天您希望图片具有10像素的边框，几个月后您现在希望它们向左浮动并且没有边框。 - GordonsBeard

1

如果您理解保持 HTML 结构和视觉样式外部（在CSS中）的概念价值，那么您可能已经在很大程度上回答了自己的问题。这甚至还没有深入探讨通过维护样式表来改变整个站点外观而无需影响大量 HTML 文件的简便性。 - David W

4个回答

4

从这段代码开始：

<ul>
    <li style="color: blue;">One</li>
    <li style="color: blue;">Two</li>
    <li style="color: blue;">Three</li>
    <li style="color: blue;">Four</li>
</ul>

假设今天你决定将链接颜色更改为红色。由于这些样式是内联的，因此您需要费力地遍历每个元素并更改style属性。想象一下为10个，甚至20个HTML页面执行此操作，您就会发现这成为一个问题。

使用样式表可以将内容分离：

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

从样式方面：

ul li {
    color: blue;
}

如果一开始使用样式表，更改颜色只需在样式表中将blue更改为red，非常简单。

除了使文档更易于样式化之外，还有选择器的特定性。假设您继承了第一个代码块，并希望再次更改颜色，但您（作为一个好的开发人员）更喜欢使用样式表。

ul li {
    color: red;
}

如果您的选择器无法覆盖内联样式，您很快就会感到沮丧并采用!important，请注意这种情况。

- Blender

1

CSS应该作为另一个包含在HTML中的文件，因为如果您想更改包含在多个页面中的元素的一个样式，您只需从CSS更改一个样式，更改将应用于所有文件。如果您在HTML中使用样式，则需要逐个页面地更改样式。这是一种良好的模板构建实践。

- Grigor

1

通过分离标记和CSS，您可以使用CSS更改所有内容的外观，而不影响标记。

好处包括：为相同的HTML创建不同的设计。在团队中分工。一个前端开发人员可以完全专注于CSS。后端开发人员无需烦恼CSS。将来更容易改变外观。将来更容易迁移HTML标记到新平台或内容管理系统。

- MarkusDBX

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim Goodman · Accepted Answer

关注点分离 这使得更换样式而不改变标记变得容易，反之亦然。此外，您可以让一个人处理CSS，另一个人处理内容。
不要重复自己 您可以将样式应用于多个元素，而无需一遍又一遍地重复它。较小的页面意味着使用更少的带宽更快的加载时间。此外，修改起来更容易，因为您可以在一个文件的一个地方进行更改，而不是在许多文件的许多地方进行更改。
可缓存性 如果您的站点的每个页面都使用相同的样式表，则浏览器可以下载一次并缓存它，而不是在每个单独页面的内容中下载样式。并且只要这些页面的内容不变，就无需重新下载。
多个版本 由于您只需要交换样式表文件即可更改整个站点的视觉布局和外观，因此很容易创建多个版本。例如，您可以创建一个白标版本的Web应用程序，供合作伙伴重新设计以匹配其品牌。请参见CSS Zen Garden，了解此方法的灵活性有多大。