为每个 HTML 页面制作单独的 CSS 文件是个好主意吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30557915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it good idea to make separate CSS file for each HTML page?
提问by Esha
I am building a personal homepage. I have 4 HTML pages and only one CSS sheet linked for all of the pages. That is, inside a single CSS file I have set up layout for all different pages. [In fact, each page has pretty much the same layout, only the contents and their style looks different. And my website isnt that advance.]
我正在建立一个个人主页。我有 4 个 HTML 页面，所有页面只有一个 CSS 表链接。也就是说，在单个 CSS 文件中，我为所有不同的页面设置了布局。【其实每个页面的布局都差不多，只是内容和风格不同而已。而我的网站并不是那么先进。]
Is it a good practice? Or I should create separate CSS for each page?
这是一个好习惯吗？或者我应该为每个页面创建单独的 CSS？
An example of that what I have done:
我所做的一个例子：
page-1.html:
第 1.html 页：
<link rel="stylesheet" type="text/css" href="design.css">
page-2.html:
第 2.html 页：
<link rel="stylesheet" type="text/css" href="design.css">
design.css:
设计.css：
/*
.......
*/
采纳答案by Cristian D
Your example shows you using one design.cssfile for your entire website.
您的示例显示您design.css为整个网站使用一个文件。
Generally, it is better to have one single .css file containing data for all pages for 2 reasons:
一般来说，最好有一个包含所有页面数据的 .css 文件，原因有二：
- You will allow browsers to cache .css files thus resulting in faster loading times;
- It will ease the maintenance process.
- 您将允许浏览器缓存 .css 文件，从而缩短加载时间；
- 它将简化维护过程。
I would advise you, if you really want to divide .css in separate blocks to use CSS' @importto divide blocks of code f.e form styles and so on.
我会建议你，如果你真的想将 .css 划分为单独的块，以使用 CSS'@import来划分代码块和样式等等。
回答by Joshua Kelly
Just have 1 css file for something so small. When you get into building larger sites you can split your style sheets up into modules.
对于这么小的东西，只需 1 个 css 文件。当您开始构建更大的站点时，您可以将样式表分成多个模块。
Have a read through the Scalable and Modular Architecture for CSSapproach as it's a solid way of thinking before you get to a level where you can build out your own css architecture.
在达到可以构建自己的 css 架构的水平之前，请通读CSS方法的可扩展和模块化架构，因为它是一种可靠的思维方式。
回答by Dinei
It's a good practice. As you said that
这是一个很好的做法。正如你所说
In fact, each page has pretty much the same layout, only the contents and their style looks different. And my website isnt that advance.
实际上，每个页面的布局几乎相同，只是内容和样式看起来不同。而我的网站不是那么先进。
So keep just one CSS file. Reasons:
所以只保留一个 CSS 文件。原因：
- It's easy for browsers to keep the cache
- It's better for maintenance, as you have all your design rules in just one place.
- As your project is small, the CSS file is not so big at all.
- 浏览器很容易保留缓存
- 更利于维护，因为您将所有设计规则集中在一处。
- 由于您的项目很小，CSS 文件根本没有那么大。
If you want to separate the files for organizational reasons, I will suggest you to read about CSS Preprocessors like Lessor Sass. With them you can set your styles in separated files and join all of them before the releasing.
如果您出于组织原因想将文件分开，我建议您阅读 CSS 预处理器，例如Less或Sass。使用它们，您可以在单独的文件中设置样式，并在发布之前加入所有样式。
回答by Kaushik Thanki
you should keep only one css file. Let me tell you in simple one line, once your website loads in client web browser the static resource can be cached that helped your website to boost and number of web request can be reduce when user browse multiple pages of your website.
你应该只保留一个 css 文件。让我用简单的一句话告诉您，一旦您的网站在客户端 Web 浏览器中加载，静态资源可以被缓存，这有助于您的网站提升，并且在用户浏览您网站的多个页面时可以减少 Web 请求的数量。
回答by Sarit Adhikari
There's not universal best practice for doing it. Generally for large projects, it is recommended to separate css among multiple files for debugging and maintenance during development. As your personal website doesn't seem too complicated, it doesn't seem reasonable to separate them out. This type of question has already been answered.
没有通用的最佳实践来做这件事。一般对于大型项目，建议在开发时将css分开多个文件进行调试和维护。由于您的个人网站看起来并不复杂，因此将它们分开似乎并不合理。这种类型的问题已经得到了回答。
Single huge .css file vs. multiple smaller specific .css files?
回答by Sarit Adhikari
I would recommend you use SCSS or LESS. These pre-compilers will allow you to use valid CSS if you do not want to use the fancy syntax. They will allow you to modularise your code and then com
我建议您使用 SCSS 或 LESS。如果您不想使用花哨的语法，这些预编译器将允许您使用有效的 CSS。他们将允许您模块化您的代码，然后com
