为什么所有的CSS文件都在一个文件夹中？

Question

我一直坚持将所有CSS文件放在一个文件夹中的做法。这只是为了保持组织的有序性，还是除此之外还有其他任何好处。

这个问题不仅仅是为了说明的目的，我有很多的网站，我试图减少他们的加载时间，我想知道这种方法是否会有所帮助。

Answer 1

两个原因来考虑，现在（在保持了HTML，JS和CSS单独做）：

• CSS和JS可以在多个HTML文件，如果是在外部文件中重复使用，但您需要如果是单个html + css + js页面，则在每个页面中复制相同的代码。
• 如果你想要的话，你可以为在线页面开发一个新版本的代码css或js，当你完成你唯一需要做的事情就是改变html中链接或脚本元素的文件名。这意味着你不会被重复

将它们放置在一个CSS也意味着它更容易找到的造型和批量编辑在一个地方有很多的HTML造型。

我还发现：

• 更方便的编辑：假设你发现距离计算错误（或任何你正在工作），那么它肯定容易，只需打开包含文件负责距离计算的对象比滚动浏览您的巨大HTML文件寻找罪魁祸首。

• 语法突出显示/代码完成/您的其他功能IDE（如重构）：这可能部分与HTML文件内的代码一起工作，但并非全部如此。所以，你可以更快地工作，并在错误发生之前真正看到错误。

• 可缓存：当你的HTML代码会有所不同为您的网站的所有页面，你的CSS和JS不会，那将是愚蠢的重新加载它们的每一页（当他们穿上这恰好直接进入HTML）。

• 页面加载时间：随着HTML文件CSS和JS，他们必须加载之前，浏览器将看不到任何实际的HTML，所以页面会显示较慢。此外，不关心你的脚本的搜索引擎将不得不加载它们，并且基于页面加载时间会受到处罚。

• 缩小：在生产中，你用​​你的CSS和JS的缩小（和连续）的版本，当然你不想手动创建，每次你做出改变，所以你做编程。试图在没有单独文件的情况下做到这一点会变得非常难看，并且您无法缓存缩小版本，这将会大大降低性能。

• CSS发电机：当你开始在意保持代码的重复降到最低，你会很快写CSS，里面充满了重复的，和开关，例如轮胎，以SASS（像我一样很前一段时间）。你一定需要单独的文件来完成这项工作。

---

所以，在回答你的问题，

是，对于大多数的网站，将它们分开（如MVC的默认操作）可能会加快网页加载时间。 （这个规则中很少出现例外情况，但是一个带有1或2个样式声明的网站在放置在html中时可能会稍微快一点，但是如果您使用过MVC，则不会回顾而不是将它们分开！）

Answer 2

它是一个谟非常重要的组织，你不把苹果切成梨袋这是一种条件反射，但事实上你可以做到这一点...

的代码是一样的，你把CSS文件放到CSS文件夹中，但你不能这样做。

想象一下，你有30个CSS文件，40个PHP文件，50张图片和10个js文件......你需要组织这个！

Answer 3

为什么所有的CSS文件都放在一个文件夹中？

为什么有很多CSS文件开头？如果你对“减少加载时间”感兴趣，那么你应该考虑让只有一个CSS文件。

长话短说，您可以以任何您想要的方式组织您的CSS和JavaScript文件。但是，在提供文件时，您必须将所有CSS文件合并为一个（对于JavaScript也是如此）。

---

我个人保持相关的CSS，图像和JavaScript在一起。我发现用这种方式处理文件要容易得多。一个例子是：

- resources 
    - plugin1 
    - plugin1.js 
    - plugin1.css 
    - images 
    - plugin2 
    - plugin2.js 
    - plugin2.css 
    - images 

我写了所有文件夹合并CSS文件的脚本到一个文件中，minifies他们和结果复制到下面的wwwroot目录。

Answer 4

将所有css文件存储到一个文件夹中不会减少加载时间。减少加载时间的最佳方法是将所有CSS文件合并到minify it。这里的坏事是时候来改变你的风格。你将不得不保留原始文件，或者解压缩/漂亮地打印它，而不是改变，而不是再次缩小。一些CMS可以选择缩小和缓存所有样式（和JavaScript文件），这样会更好。另一方面，您的服务器端，确保您的所有样式在传递到客户端浏览器之前都进行了gzip压缩。更多关于如何enable compression on Apache