15

有人告诉我，并且读到在 html 中使用 style 属性被认为是糟糕/草率/差的形式。此外，所有渲染特定位都应酌情分成 css 和其他部分。我试图理解为什么会这样。

我可以理解为什么您可能希望将 HTML 保留为纯语义 DOM，这说明了文档的结构，但对于实际页面，重要的是页面看起来正确且功能适当。

这种分离还有一些更令人信服的理由吗？

4

4 回答 4

22

  • 关注点分离这使得在不更改标记的情况下替换样式变得容易，反之亦然。另外，你可以让一个人负责 CSS，另一个人负责内容

  • 不要重复自己您可以将样式应用于许多元素，而无需一遍又一遍地重复。较小的页面意味着使用更少的带宽更快的加载时间。另外，以后修改更容易，因为您可以在一个文件中的一处进行更改，而不是在许多文件中的许多地方进行更改。

  • 可缓存性如果站点的每个页面都使用相同的样式表，浏览器可以下载一次然后缓存它，而不是下载每个页面内容的样式。每当这些页面的内容发生变化时，他们就不必重新下载它。

  • 多个版本创建站点的视觉布局和外观的多个版本很容易，因为您只需更换样式表文件即可更改每个页面的外观。例如，您可以创建一个 Web 应用程序的白标版本，您的合作伙伴可以对其进行重新皮肤以匹配他们的品牌。请参阅CSS Zen Garden，了解有关这种方法的灵活性的一些很好的示例。

于 2013-03-02T03:26:51.977 回答
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，因为您的选择器无法覆盖内联样式。

于 2013-03-02T03:21:14.480 回答
1

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

于 2013-03-02T03:13:32.340 回答
1

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

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

于 2013-03-02T03:18:02.337 回答