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

Sleek Geek 发表于 Dev

时尚极客

我一直坚持将所有CSS文件放在一个文件夹中的做法。仅仅是为了使事情井井有条，还是有其他好处呢？

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

but

现在要想到两个原因（与将html，js和css分开保持一致）：

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

将它们放在单个CSS中还意味着更容易找到样式并在一个地方批量编辑很多html样式。

我还发现：

编辑更容易：假设您发现距离计算错误（或当前正在执行的操作），那么打开包含负责距离计算的对象的文件绝对比滚动查看巨大的HTML文件查找罪魁祸首绝对容易。
语法高亮显示/代码完成/ IDE的其他功能（例如重构）：这可能与HTML文件中的代码部分兼容，但效果不尽如人意。因此，您可以更快地工作，并在错误变成bug之前实际看到它们。
易用性：虽然您网站的所有页面的HTML代码都会不同，但是CSS和JS不会，并且为每个页面重新加载它们会很愚蠢（将它们直接放入HTML时会发生）。
页面加载时间：HTML文件中包含CSS和JS时，必须先加载它们，然后浏览器才能看到任何实际的HTML，因此页面显示速度会变慢。另外，并不真正在乎您的脚本的搜索引擎也必须加载它们，并且会根据页面加载时间进行处罚。
缩小：在生产环境中，您使用的是CSS和JS的缩小版本（串联），当然，您不想每次进行更改时都手动创建该版本，因此您可以通过编程方式进行更改。尝试在没有单独文件的情况下执行此操作将变得非常丑陋，并且您将无法缓存该缩小版本，这将对性能造成很大影响。
CSS生成器：当您开始关心将代码复制减少到最低限度时，您会很快厌倦编写很多重复的CSS，并切换到例如SASS（就像我前一段时间所做的那样）。您肯定需要单独的文件才能使该工作。