【发布时间】：2010-03-16 15:07:07
【问题描述】：
我们可以将 CSS 写成以下类型：
- 内联 CSS
- 嵌入式 CSS
- 外部 CSS
我想知道每种方法的优缺点。
【问题讨论】：
-
嵌入的意思是 ?
标签： css
【发布时间】：2010-03-16 15:07:07
【问题描述】：
正如我所见，这就是你在管道中需要 CSS 的地方。
1。内联css
优点：非常适合快速修复/原型设计和简单测试，无需在 .css 文档和实际 HTML 文件之间来回切换。
优点：许多电子邮件客户端不允许使用外部 .css 引用，因为可能存在垃圾邮件/滥用。嵌入可能会有所帮助。
缺点：填满 HTML 空间/占用带宽，不能跨页面重复使用 - 甚至 IFRAMES。
2。嵌入式css
优点：关于原型与上述相同，但在模板完成后更容易从最终原型中切出并放入外部文件中。
缺点：一些电子邮件客户端不允许在 [head] 中使用样式，因为大多数 webmail 客户端都会删除头部标签。
3。外部CSS
优点：易于在超过 1 页的网站中维护和重复使用。
优点： 可缓存 = 更少的带宽 = 在第二个页面加载后更快的页面呈现
优点：包括 .css 在内的外部文件可以托管在 CDN 上，从而减少托管 HTML 页面的防火墙/网络服务器的请求（如果在不同的主机上）。
优点： 可编译，您可以从最终构建中自动删除所有未使用的空间，就像 jQuery 有开发版和压缩版 = 更快的下载 = 更快的用户体验 + 更少的带宽使用=更快的互联网！ （我们喜欢！！！）
缺点：通常从 HTML 邮件中删除 = 混乱的 HTML 布局。
缺点：每个文件发出额外的 HTTP 请求 = 防火墙/路由器中使用的资源更多。
我希望你可以使用其中的一些？
【讨论】：
我将提出外部样式表是唯一出路的观点。
内联 CSS 将内容与表示混合在一起，导致一团糟。
每个页面请求都会加载嵌入式 CSS，无法跨页面共享更改，并且无法缓存内容。
我不反对这两种方法本身，但如果计划一个新站点或应用程序，您应该计划外部样式表。
【讨论】：
-
javascripts 也是如此，该死的，我看到了很多来自蹩脚的 CMS 插件的混乱 HTML 输出
内联
很快，但很脏
对于 HTML 格式的电子邮件，这也是唯一真正明智的选择，因为其他格式的电子邮件经常被各种电子邮件客户端丢弃。
嵌入式
不需要额外的 HTTP 请求，但没有以下好处：
链接
可以缓存，在页面之间重复使用，更容易使用验证器进行测试。
【讨论】：
你想要外部 css。它是最容易维护的，外部 css 也简化了缓存。嵌入意味着每个单独的 html 文件都需要有自己的 css，这意味着文件大小更大，并且在更改 css 时会遇到很多麻烦。内联 CSS 更难维护。
外部 css 是要走的路。
【讨论】：
从哪里开始！！？？
假设您有一个有 3 页的网站... 您可以使用内联 CSS（即页面本身上的 CSS，在标签内）。
如果您有一个 100 页的网站... 您不想单独更改每个页面上的 CSS（或者您愿意吗？！）... 因此，包含一个外部 CSS 表单会是更好的选择。
【讨论】：
内联 CSS 通常很糟糕。当所有样式都位于一个中心位置时，修改页面样式要容易得多，而内联 CSS 不提供。快速制作样式原型很容易，但不应该在生产中使用，尤其是因为它经常导致样式重复。
嵌入式 CSS 集中了页面的样式，但它不允许您在不复制嵌入式样式的文本并将其粘贴到您网站上的每个唯一页面的情况下跨页面共享样式。
外部 CSS 是可行的方法，它具有嵌入式 CSS 的所有优点，但它允许您在多个页面之间共享样式。
【讨论】：
在以下情况下使用外部 CSS：
- 如果你把它全部内联，你有很多 css 代码会使你的文件变得混乱
- 你想保持一个标准 跨多个页面的外观
外部 CSS 使管理 CSS 变得更加容易，并且是公认的实现样式的方式。
如果样式只需要一个文件，并且您没有预见到会更改以应用于其他页面，您可以将您的 css 放在文件的顶部（嵌入？）。
您通常应该只在以下情况下使用内联 CSS：
- 这是针对特定标签的一次性格式化
- 您想要覆盖特定标签的默认 css（在外部或文件顶部设置）
【讨论】：
致此时此地的每个人，2015 年后阅读，Polymer、Browserify、Webpack、Babel 等项目，以及我可能错过的许多其他重要参与者，我们已经迎来了进入编写 HTML 应用程序的新时代，关于我们如何模块化大型应用程序、分发更改以及将相关的表示、标记和行为组合成独立的单元。让我们甚至不开始使用 Service Worker。
因此，在任何人就什么可行和不可行形成意见之前，我建议他们调查当前的网络生态系统，看看是否已经妥善解决了与可维护性相关的一些问题。
【讨论】：
优点：
允许您使用一个文件控制整个网站的布局。 更改同时影响所有文档。 可以消除多余的内嵌样式（字体、粗体、颜色、图像） 为不同类型的用户提供同一内容的多个视图。
缺点：
旧版浏览器可能无法理解 CSS。 并非每个浏览器都同样支持 CSS。 在这种情况下，利大于弊。事实上，如果网站以特定方式设计，较旧的浏览器会比使用表格管理网站时（平均而言）更好地显示内容。
【讨论】：
如果您使用的是服务器端语言，为什么不嵌入 CSS 并根据需要使用条件编程来显示它？例如，假设您正在使用带有 Wordpress 的 PHP，并且您想要一些特定于主页的 CSS；您可以使用 is_home() 函数仅在该页面的文档头部显示您的 CSS。就个人而言，我有自己的模板系统，其工作方式如下：
inc.header.php = 所有标题内容，以及页面特定的 CSS 将放在哪里：
if(isset($CSS)) echo $CSS;
然后，在一个特定的页面模板（比如 about.php）中，我会在包含标题的行上方为页面特定的 CSS 使用 heredoc 变量：
about.php 的内容：
<?php
$CSS = <<< CSS
.about-us-photo-box{
/* CSS code */
}
.about-us-something-else{
/* more CSS code */
}
CSS;
include "inc.header.php"; // this file includes if(isset($CSS)) echo $CSS; where page-specific CSS would go ...
<body>
<!-- about us html -->
include "inc.footer.php";
?>
我是否遗漏了什么使这种方法变得逊色？
优点：
1) 我仍然可以使用标准缓存技术缓存页面（是否有一种缓存方法可以利用仅 CSS 的外部文件？？）。
2) 如果绝对必要，我可以在特定的类声明中使用 php 进行特殊情况条件格式（PHP 不能在 CSS 文件中工作，除非我缺少一些我可以设置的服务器指令）。
3) 我所有的页面特定 CSS 在实际使用它的 PHP 文件中组织得非常好。
4) 它减少了对外部文件的 HTTP 请求。
5) 它减少了服务器对外部文件的请求。
缺点：
1) 我的 IDE 程序 (Komodo IDE) 无法按照 Heredoc 格式正确突出显示 CSS，这使得调试 CSS 中的语法错误变得更加困难。
2) 实在看不出还有什么骗局，请赐教！
【讨论】：