Question

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

这个问题不只是为了澄清目的，我有很多网站，我正在努力减少他们的加载时间，我想知道这种方法是否会有所帮助。

Answer 1

现在要记住两个原因（与保持html，js和css分开）：

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

将它们放入单个css中也意味着在一个地方更容易找到样式并批量修改很多html样式。

我还发现：

更容易编辑：假设您发现距离计算错误（或者您正在处理的任何内容），那么只需打开包含该距离的文件就更容易了负责距离计算的对象，而不是滚动查看罪魁祸首的巨大HTML文件。
语法突出显示/代码完成/ IDE的其他功能（如重构）：这可能部分与HTML文件中的代码有关，但效果不是很好。因此，您可以更快地工作，并在错误成为错误之前查看错误。
Cachability ：虽然您网站的所有网页的HTML代码都不同，但您的CSS和JS不会，并且每次重新加载它们都会很愚蠢页面（当它们直接放入HTML时会发生）。
页面加载时间：在HTML文件中使用CSS和JS，必须在浏览器看到任何实际HTML之前加载它们，因此页面显示速度会变慢。此外，不太关心脚本的搜索引擎必须加载它们，并且会根据页面加载时间进行处罚。
缩小：在制作中，您使用CSS和JS的缩小（并连接）版本，当然，您不希望每次都手动创建做一个改变，所以你以编程方式做。试图在没有单独文件的情况下这样做会变得非常难看，而且你无法缓存那个缩小版本的版本，这将会影响性能。
CSS生成器：当您开始关心将代码重复保持在最低限度时，您将很快厌倦编写充满重复的CSS，并切换到例如SASS（就像我很久以前做过的那样）。你肯定需要单独的文件才能使它发挥作用。

所以，回答你的问题，

是的，对于大多数网站而言，将它们分开（默认情况下，mvc会这样做）可能会加快您的加载时间。（此规则中出现的例外情况非常少，但是当放置在html中时，具有1或2个样式声明的网站可能略微更快，但如果您使用MVC，则不会再回头看不将它们分开！）

Answer 2

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

的更多信息

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文件合并到一个文件中，缩小它们并将结果复制到wwwroot下面的目录中。

Answer 4

组织对于一个项目来说非常重要，你不要将苹果放入一个梨袋中它是一种反射，但实际上你可以做到这一点......

对于代码它是相同的，你将CSS文件放入CSS文件夹，但你不能这样做。

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

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

4 个答案: