单个巨大的.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请求。

编辑：

我发现这个博客，显示如何在运行时使用除了代码之外的CSS组合。值得一看（虽然我还没有测试过）。

编辑2：

我已经在我的设计时间内解决了使用单独的文件，以及一个缩小和组合的构建过程。这样，我可以在开发时具有单独的（可管理的）CSS，并且在运行时可以使用适当的单片最小化文件。我还有静态文件和系统开销较少，因为我在运行时没有进行压缩/缩小。

注意：强烈建议您在构建过程中使用 bundler 。无论您是从IDE中构建还是从构建脚本构建，可以通过包含的 exe 在Windows上执行bundler，也可以在任何已在运行的计算机上运行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屋！