【问题标题】:Why have all CSS files in one folder? [closed]为什么要将所有 CSS 文件放在一个文件夹中? [关闭]
【发布时间】:2015-01-11 22:08:55
【问题描述】:

我一直坚持将所有 CSS 文件放在一个文件夹中的做法。仅仅是为了让事情井井有条,还是除此之外还有其他好处。

这个问题不仅仅是为了澄清,我有很多网站都在尝试减少它们的加载时间,我想知道这种方法是否会有所帮助。

【问题讨论】:

  • 它使它可维护。在编写html/etc时,只去一个地方编辑真的很有帮助
  • 这不是唯一的办法,你可以把html&js相关的css文件放在一个目录下,这个有个名字忘记叫什么了。
  • 关于这篇文章,herehere 的讨论非常好。

标签: css code-organization


【解决方案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,您将不会回头查看 将它们分开!)

【讨论】:

    【解决方案2】:

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

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

    长话短说,您可以随意组织 CSS 和 JavaScript 文件。但是,在提供文件时,您必须将所有 CSS 文件合并并缩小为一个(对于 JavaScript 也是如此)。


    我个人将相关的 CSS、图像和 JavaScript 放在一起。我发现以这种方式处理文件要容易得多。一个例子是:

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

    我编写了一个脚本,它将所有文件夹中的 CSS 文件合并到一个文件中,将它们缩小并将结果复制到 wwwroot 下的目录。

    【讨论】:

      【解决方案3】:

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

      【讨论】:

      • 不会减少加载时间?缓存期间会发生什么?
      • 而不是调用例如 10 个 css 文件,CMS(作为 xCart)可以将所有样式一起缩小,这样只向浏览器提供一个 css 文件。仅等待 10 个文件的响应可能需要一秒钟以上。一旦你改变了你的 css 文件,你告诉你的 CMS 再次缓存它们,很简单。
      • 我很抱歉读错了您的答案。我以为你纯粹是在说单个 css 没有帮助,而不是 放入一个文件夹。毕竟,它们的含义不同
      【解决方案4】:

      组织对于一个项目来说非常重要,你不要把苹果装进梨袋里,这是一种反射,但事实上你可以做到……

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

      想象一下,你有 30 个 CSS 文件、40 个 PHP 文件、50 个图片和 10 个 js 文件……你需要组织这个!

      【讨论】:

        猜你喜欢
        • 2012-05-18
        • 1970-01-01
        • 2017-03-14
        • 2017-02-19
        • 1970-01-01
        • 2014-04-22
        • 1970-01-01
        • 1970-01-01
        • 2014-05-21
        相关资源
        最近更新 更多