我被告知,并且读到使用html中的style属性被认为是糟糕/邋/ /差形式。此外,所有渲染特定位应该适当地分成css和其他部分。我试图理解为什么会这样。
我可以看到为什么你可能希望将HTML保持为纯语义DOM,它说明文档的结构,但对于实际页面,重要的是页面看起来正确并且功能正常。
这种分离是否有更令人信服的理由?
答案 0 :(得分:14)
关注点分离这样可以在不更改标记的情况下轻松替换样式,反之亦然。此外,您可以让一个人使用CSS,另一个人使用内容
不要重复自己您可以将样式应用于多个元素,而无需反复重复。较小的页面意味着使用较少的带宽可以加快加载速度。此外,以后更容易修改,因为您可以在一个文件中的一个位置更改它,而不是在许多文件中的许多位置。
Cachability 如果在您网站的每个页面上使用相同的样式表,浏览器可以下载一次然后缓存它,而不是下载包含每个页面内容的样式。只要这些页面的内容发生变化,他们就不必重新下载它。
多个版本您可以轻松创建多个版本的视觉布局和网站外观,因为您只需要换出样式表文件即可更改每个页面的外观。例如,您可以创建一个Web应用程序的白标版本,您的合作伙伴可以重新设置它以匹配其品牌。请参阅CSS Zen Garden,了解这种方法的灵活性。
答案 1 :(得分: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
,因为您的选择器无法覆盖内联样式。
答案 2 :(得分:1)
CSS应该是HTML中包含的另一个文件,因为如果要更改包含在多个页面中的元素的一种样式,您只需从CSS更改一种样式,并且更改将应用于所有文件。如果您使用HTML格式,则需要逐个浏览页面并更改样式。它是一个很好的模板构建实践。
答案 3 :(得分:1)
通过分隔标记和CSS。您可以使用css更改所有内容的外观,而不会影响标记。
好处包括: 为同一个html创建不同的设计。 在团队中划分工作。一个前端开发人员可以完全专注于CSS。 后端开发人员,不必麻烦与CSS。 将来更容易改变外观。 将来更容易将html标记迁移到新平台或内容管理系统。