单个巨大的.css文件与多个较小的特定.css文件？ [英] Single huge .css file vs. multiple smaller specific .css files?

问题描述

有一个单一的怪物.css文件包含几乎每一页都将使用的样式元素有什么优势吗？

的管理，我想拉出不同类型的CSS到几个文件，并包括每个文件在我的主< link /> 是不好？ / p>

我认为这样更好

1. positions.css


2. buttons.css


3. tables.css


4. copy.css

vs。

1. site.css

解决方案

>这是一个很难回答。两个选项在我看来都有自己的优点和缺点。

我个人不喜欢通过单个巨大的CSS文件读取，而且维护它是非常困难的。另一方面，拆分它会导致额外的http请求，这可能会减慢事情。

我的意见将是两件事之一。

1）如果你知道你的CSS将永远不会改变，一旦你建立它，我会在开发阶段（为了可读性）构建多个CSS文件，然后手动结合它们， （以减少http请求）

2）如果你知道你会在一段时间内更改你的CSS，并需要保持可读性，我会构建单独的文件和使用代码（如果你使用某种编程语言）在运行时构建时间（运行时缩小/组合是一个资源猪）。

对于任一选项，我强烈建议客户端缓存，以进一步减少http请求。

EDIT：

我发现这个 blog ，它展示了如何在运行时使用代码组合CSS。值得看看（虽然我还没有自己测试）。

编辑2： b $ b我已经决定在我的设计时使用单独的文件，以及一个构建过程来缩小和组合。这样我可以有独立的（可管理的）css，而我开发和一个适当的单片化文件在运行时。我仍然有我的静态文件和更少的系统开销，因为我不是在运行时压缩/缩小。

注意：强烈建议您在构建过程中使用 bundler 。无论是在IDE中构建还是从构建脚本构建，bundler都可以通过包含的 exe 在Windows上执行，或者可以在任何已经运行的机器上运行node.js。

Is there any advantage to having a single monster .css file that contains style elements that will be used on almost every page?

I'm thinking that for ease of management, I'd like to pull out different types of CSS into a few files, and include every file in my main <link /> is that bad?

I'm thinking this is better

1. positions.css
2. buttons.css
3. tables.css
4. copy.css

vs.

1. site.css

Have you seen any gotchas with doing it one way vs. the other?

解决方案

This is a hard one to answer. Both options have their pros and cons in my opinion.

I personally don't love reading through a single HUGE CSS file, and maintaining it is very difficult. On the other hand, splitting it out causes extra http requests which could potentially slow things down.

My opinion would be one of two things.

1) If you know that your CSS will NEVER change once you've built it, I'd build multiple CSS files in the development stage (for readability), and then manually combine them before going live (to reduce http requests)

2) If you know that you're going to change your CSS once in a while, and need to keep it readable, I would build separate files and use code (providing you're using some sort of programming language) to combine them at runtime build time (runtime minification/combination is a resource pig).

With either option I would highly recommend caching on the client side in order to further reduce http requests.

EDIT:
I found this blog that shows how to combine CSS at runtime using nothing but code. Worth taking a look at (though I haven't tested it myself yet).

EDIT 2:
I've settled on using separate files in my design time, and a build process to minify and combine. This way I can have separate (manageable) css while I develop and a proper monolithic minified file at runtime. And I still have my static files and less system overhead because I'm not doing compression/minification at runtime.

note: for you shoppers out there, I highly suggest using bundler as part of your build process. Whether you're building from within your IDE, or from a build script, bundler can be executed on Windows via the included exe or can be run on any machine that is already running node.js.

这篇关于单个巨大的.css文件与多个较小的特定.css文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！