本节书摘来自华章计算机《Web前端开发***实践》一书中的第3章，第3.5节,作者:党　建 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.5　样式与结构分离

网页的结构、表现和行为分离是W3C制定的Web页面标准的精髓，一般的页面结构和表现对应着代码中的HTML和CSS，这意味着在页面中HTML和CSS分离是符合标准的做法。在讨论页面中HTML和CSS组合的***实践之前，先来简单说明一下HTML和CSS所有的组合方式。
把CSS样式应用于HTML总共有4种方式。
（1）在HTML页面中链接一个CSS文件
文件以link的形式添加到

部分，在link中可以设置media 属性来表明样式使用的场景。例如，media设置为screen表示正常浏览时的CSS样式，设置为print则表示页面打印时的CSS样式。
示例代码：

<link rel="stylesheet" href="default.css" />
<link rel="stylesheet" href="print.css" media="print" />

这种模式是***实践模式，做到了CSS和HTML的完美分离。如果需要修改页面的样式，则只需要修改CSS文件。此方式最大的优点是提高了性能。当多个页面共用一个相同的样式时，只会在首个页面访问时需要下载CSS文件，随后其他页面访问则只需要下载页面本身，CSS文件可直接从缓存中取得，不用再次从服务器端下载，从而提高了页面加载的速度。
（2）在HTML页面中内嵌CSS样式
此方式是把CSS样式直接内嵌到HTML页面

中，所有的CSS样式放置在style标签中，示例代码：

<style>
    body { }
</style>

此方式虽然也做到了CSS和HTML的分离，但是因为CSS和HTML放置到了同一个文件中，不利于样式的重用，也不利于多人维护。如果CSS样式用在多个页面时，CSS样式和HTML分离，可以利用CSS文件的缓存，提高多个页面整体的加载速度。当然，此方式也有一些优点，如果CSS样式只是用到单一的页面，则当CSS和HTML放置在同一个页面，会减少加载CSS样式文件的请求数量，加快页面加载速度。此外，在一些动态生成页面的场合，比如，在博客系统的自定义页面部分，将CSS和HTML放置在一起，方便输出和生成自定义页面。新浪网的首页正是把脚本和样式直接放置到了页面中，提高了页面加载速度。如果要合并CSS和HTML代码，一种好的实践是：在开发阶段，将CSS和HTML放置于单独的页面中，方便后续开发和维护。当代码发布时，通过工具合并CSS和HTML代码，提高页面实际运行时的性能。
（3）在HTML标签中添加内联CSS样式
此方式是样式直接添加到元素的style属性中。
示例代码：

<span style="color: green; background: transparent">green</span>

此种方式非常不利于页面的维护和样式的重用。很多糟糕的页面都是因为这种样式内嵌在元素中而导致页面代码庞大，难以维护。这种方式也降低了页面的可用性，并且也不利于搜索引擎对页面的识别。当然，此方式方便于通过JavaScript代码动态更改元素样式，如通过JavaScript代码给元素设置display样式值为none来控制元素的隐藏。jQuery框架中也通过大量利用此方式来给元素动态设置样式，从而实现一些动态效果。
（4）在CSS样式文件中加载CSS样式文件
示例代码：

@import "mystyle.css";
@import url("mystyle.css");

这种方式是使用得较少的一种方式。每当看到前端性能相关的***实践时，总能看到一条：不要使用@import。此方式最大的缺点是引用的CSS文件不能同时并行下载，这样延长了整个页面的下载过程，影响了页面加载性能。
以上4种引用CSS样式的方式中，第一种方式是作为***实践的方式推荐使用，第二种方式可以在某些场合有选择地灵活使用，第三种方式应避免在页面中直接使用，第四种方式在任何场合都应该避免使用。