每个页面有一个 CSS 文件还是单独的 CSS 文件？

One CSS File or individual CSS files for each page?

提问by JCHASE11

When I am building pages, do I want to have individual stylesheets for each page or one large stylesheet for the entire site? For loading purposes, wouldn't individual files be a better practice because it would be less total css on load?

当我构建页面时，我是希望每个页面都有单独的样式表，还是整个站点都有一个大的样式表？出于加载目的，单个文件不是更好的做法，因为加载时总 css 会更少吗？

回答by Ben Everard

Use a single file, CSS files are cached and therefore reduce the need to download a new file for each new page visited.

使用单个文件，CSS 文件被缓存，因此减少了为访问的每个新页面下载新文件的需要。

To help, I usually slap my CSS through a CSS cleanerto reduce its file size, additionally you can GZip CSS using .htaccesstoo, making it smaller yet again.

为了提供帮助，我通常通过CSS 清洁器来减少我的 CSS文件大小，此外，您也可以使用 .htaccess对CSS 进行 GZip压缩，使其再次变小。

Finally putting all CSS in a single file will make making system wide changes to presentation easier in the future (the entire reason we use CSS in the first place), it will also make debugging easier.

最后将所有 CSS 放在一个文件中将使系统范围内的更改在将来更容易（我们首先使用 CSS 的全部原因），它还将使调试更容易。

Edit, May 2017

编辑，2017 年 5 月

A lot has changed in 7+ years, and anyone looking at this answer should consider researching newer asset delivery methods, especially now use of HTTP2 and preprocessors are more commonplace.

7 年多来发生了很多变化，任何看到这个答案的人都应该考虑研究更新的资产交付方法，尤其是现在 HTTP2 和预处理器的使用更为普遍。

回答by Shailesh Kumar

A different suggestion, use multiple style sheets during development and have a mechanism which will merge all the style sheets into a single CSS file for production deployment. This may require some bit of extra coding and some extra scripts to be run before production deployment but would be ideal for both development use and production use. If the process is properly automated (which is not very difficult to achieve) this won't cause any kind of mistakes also.

一个不同的建议是，在开发过程中使用多个样式表，并有一种机制可以将所有样式表合并到一个用于生产部署的 CSS 文件中。这可能需要在生产部署之前运行一些额外的编码和一些额外的脚本，但对于开发用途和生产用途来说都是理想的选择。如果该过程适当地自动化（这不是很难实现），这也不会导致任何类型的错误。

回答by dhornbein

The main purpose of the style sheet is to allow you to alter the design across all your pages. If you have h1 {color:red;}on each page and later want to change it to blue you would have to edit each page's style sheet. With one style sheet you would be able to change the color and have that reflected over the entire site.

样式表的主要目的是允许您更改所有页面的设计。如果您h1 {color:red;}在每个页面上都有，后来想将其更改为蓝色，则必须编辑每个页面的样式表。使用一个样式表，您将能够更改颜色并将其反映在整个站点上。

Plus the style sheet will be cached on the user's computer rather than downloaded from each page.

此外，样式表将缓存在用户的计算机上，而不是从每个页面下载。

回答by DOK

If you want to have a consistent style across all pages in your website, use one stylesheet for all of the common styles. Otherwise, you may find it quite difficult to maintain many stylesheets. Changes would have to be added to every one of multiple stylesheets.

如果您想在网站的所有页面上使用一致的样式，请为所有常见样式使用一个样式表。否则，您可能会发现维护许多样式表非常困难。必须将更改添加到多个样式表中的每一个中。

Stylesheets that are used only on a single page could go in separate stylesheets. This might be most useful for large single-page stylesheets and/or stylesheets for infrequently-accessed web pages.

仅在单个页面上使用的样式表可以放在单独的样式表中。这对于不常访问的网页的大型单页样式表和/或样式表可能最有用。

Your stylesheets will not be reloaded on every page refresh. If you reference the large, general-purpose stylesheet on your home page, it will only be downloaded once, and cached for future use.

您的样式表不会在每次页面刷新时重新加载。如果您在主页上引用大型通用样式表，它只会被下载一次，并被缓存以备将来使用。

回答by Thomas

"For loading purposes, wouldn't you want a smaller stylesheet, therefor making individual ones is a better practice?"

“出于加载目的，您不想要一个较小的样式表，因此制作单独的样式表是更好的做法吗？”

This can have a reverse effect, as using 1 stylesheet it can be cached and then re-loaded with ease, whereas it is constantly loading a new CSS file for each page with your method.

这可能会产生相反的效果，因为使用 1 个样式表可以轻松缓存然后重新加载，而它会不断地为每个页面加载一个新的 CSS 文件。

Most sites do not need to have more than one stylesheet for one type of media. However if your site drastically varies in design I would suggest having a base stylesheet which has all the common properties, and then a secondary stylesheet for each of the pages which contains the differences.

大多数站点不需要为一种类型的媒体拥有多个样式表。但是，如果您的网站在设计上有很大差异，我建议您拥有一个包含所有公共属性的基本样式表，然后为每个包含差异的页面设置一个辅助样式表。

This should only be used if the CSS changes are large enough in size to warrant the use of seperate stylesheets.

仅当 CSS 更改的大小足够大以保证使用单独的样式表时，才应使用此选项。

回答by Iamsamstimpson

I came across this thread seeking the same question.. My thought was to structure like this..

我遇到了这个寻求同样问题的线程..我的想法是这样构建..

Layout.css <--- for structure of the site, links, headings etc that are common across the site. form.css <-- generic form styles reset.css <-- all the document resets if you use them

Layout.css <--- 用于站点结构、链接、标题等，这些在站点中是通用的。form.css <-- 通用表单样式 reset.css <-- 如果您使用它们，所有文档都会重置

and currently I use pages.css for all page styles..

目前我将 pages.css 用于所有页面样式。

or

或者

homepage.css about.css gallery.css

homepage.css about.css gallery.css

回答by Esko

Since I'm actually an actual web programmer (Java's web programming stuff, not scripting such as PHP) I have to give you an opinion I've never seen any actual web designergive:

由于我实际上是一名真正的 Web 程序员（Java 的 Web 编程内容，而不是诸如 PHP 之类的脚本），因此我必须给您一个意见，我从未见过任何真正的 Web设计师给出：

Please go ahead and split your CSS files to multiple, logical partitions wherever possible! If you have a hugely stylized table, collect its CSS stuff to one file, also collect the base stylings of the actual page to another file, add those menu navigation CSS:s to third one and so on and so forth. You can of course reuse individual CSS:s where they're relevant but DO NOTjust cram everything into one big file!

请继续并尽可能将您的 CSS 文件拆分为多个逻辑分区！如果您有一个非常风格化的表格，请将其 CSS 内容收集到一个文件中，还将实际页面的基本样式收集到另一个文件中，将那些菜单导航 CSS:s 添加到第三个，依此类推。您当然可以在相关的地方重用单个 CSS:s，但不要只是将所有内容都塞进一个大文件中！