为每个 HTML 页面制作单独的 CSS 文件是个好主意吗？答案

【问题标题】：Is it good idea to make separate CSS file for each HTML page?为每个 HTML 页面制作单独的 CSS 文件是个好主意吗？
【发布时间】：2015-08-13 23:49:34
【问题描述】：

我正在建立一个个人主页。我有 4 个 HTML 页面，只有一个 CSS 表链接到所有页面。也就是说，在一个 CSS 文件中，我为所有不同的页面设置了布局。【其实每一页的布局都差不多，只是内容和风格看起来不一样。而我的网站也不是那么先进。]

这是一个好习惯吗？或者我应该为每个页面创建单独的 CSS？

我所做的一个例子：

page-1.html:

<link rel="stylesheet" type="text/css" href="design.css">

page-2.html：

<link rel="stylesheet" type="text/css" href="design.css">

设计.css：

/*
.......
*/

【问题讨论】：

对于小型网站，我认为一个 CSS 文件足以容纳多个 HTML 页面。但对于较大的，您可以考虑使用多个 CSS 文件，因为它可以帮助您的网站更加模块化和结构良好。但从性能的角度来看，对于每个 HTML 外部对象（例如 JS、CSS、图像、...文件），non-persistent HTTP mode 中需要一个额外的 HTTP 事务。但这不被认为是高影响的。
Single huge .css file vs. multiple smaller specific .css files?的可能重复

标签： html css web

【解决方案1】：

只有 1 个 css 文件用于这么小的东西。当您开始构建更大的网站时，您可以将样式表拆分为模块。

通读Scalable and Modular Architecture for CSS 方法，因为它是一种可靠的思维方式，然后才能构建自己的 css 架构。

【讨论】：

【解决方案2】：

您的示例显示您为整个网站使用一个design.css 文件。

一般来说，最好有一个包含所有页面数据的单个 .css 文件，原因有两个：

我会建议你，如果你真的想将 .css 划分为单独的块以使用 CSS'@import 来划分代码块 f.e 表单样式等等。

【讨论】：

嗯？ @import 通常会导致多个请求，而不是一件好事。
它使维护更容易，并允许从一个文件中导入所有样式。如果项目变得更大，建议将 .css 文件拆分为块，这与在一个页面中为 .css 文件具有多个标签相同。这样的事情有时是必要的，尝试在 Facebook 等网站上运行性能报告，Chrome 告诉我 Facebook 在这一章很糟糕。
您不会使用带有大量导入的 css 文件进行生产。这实际上是一个糟糕的建议。它使开发过程中的维护变得更容易，但如果在生产中使用，@torazaburo 就其将创建的多个 http 请求而言是正确的。

【解决方案3】：

这是一个很好的做法。就像你说的那样

实际上，每个页面的布局几乎相同，只是内容和样式看起来不同。而我的网站也不是那么先进。

所以只保留一个 CSS 文件。原因：

如果您出于组织原因想要分隔文件，我建议您阅读 CSS 预处理器，例如 Less 或 Sass。有了它们，您可以将样式设置在单独的文件中，并在发布之前将它们全部加入。

【讨论】：

【解决方案4】：

没有通用的最佳实践。一般对于大型项目，建议在开发过程中将css分离到多个文件中进行调试和维护。由于您的个人网站似乎并不太复杂，因此将它们分开似乎并不合理。此类问题已得到解答。

【讨论】：

【解决方案5】：

您应该只保留一个 css 文件。让我简单地告诉您，一旦您的网站在客户端网络浏览器中加载，静态资源可以被缓存，这有助于您的网站在用户浏览您网站的多个页面时帮助您的网站提升和网络请求的数量可以减少。

【讨论】：

【解决方案6】：

我建议您使用 SCSS 或 LESS。如果您不想使用花哨的语法，这些预编译器将允许您使用有效的 CSS。它们将允许您模块化您的代码，然后 com

【讨论】：