Question

我被告知，并且读到使用html中的style属性被认为是糟糕/邋/ /差形式。此外，所有渲染特定位应该适当地分成css和其他部分。我试图理解为什么会这样。

我可以看到为什么你可能希望将HTML保持为纯语义DOM，它说明文档的结构，但对于实际页面，重要的是页面看起来正确并且功能正常。

这种分离是否有更令人信服的理由？

Answer 1

关注点分离这样可以在不更改标记的情况下轻松替换样式，反之亦然。此外，您可以让一个人使用CSS，另一个人使用内容
不要重复自己您可以将样式应用于多个元素，而无需反复重复。较小的页面意味着使用较少的带宽可以加快加载速度。此外，以后更容易修改，因为您可以在一个文件中的一个位置更改它，而不是在许多文件中的许多位置。
Cachability 如果在您网站的每个页面上使用相同的样式表，浏览器可以下载一次然后缓存它，而不是下载包含每个页面内容的样式。只要这些页面的内容发生变化，他们就不必重新下载它。
多个版本您可以轻松创建多个版本的视觉布局和网站外观，因为您只需要换出样式表文件即可更改每个页面的外观。例如，您可以创建一个Web应用程序的白标版本，您的合作伙伴可以重新设置它以匹配其品牌。请参阅CSS Zen Garden，了解这种方法的灵活性。

Answer 2

从这段代码开始：

<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，因为您的选择器无法覆盖内联样式。

Answer 3

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

Answer 4

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

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

为什么在html中使用style-attribute不好？

4 个答案: