CSS文件结构[关闭]

Question

是否有组织大量 css 文件的最佳实践或非常实用的解决方案。

首先，你应该如何在一个页面中使用css，你应该为每个单独的页面提供一个外部样式表，以及一个包含'css reset'和所有常见元素的css文件。假设您有一个包含的标题，您将如何设置它的样式，您是否有另一个外部样式表。

这只是添加了大量的样式表，其次是如何组织它们，每个页面的每个外部样式表都有一个文件夹吗？

最后，是否有任何标准命名约定，例如，如果文件是包含文件，则为“filename.inc.css”，或者如果是针对特定页面，则为“filename.pagename.css”

Answer 1

我反对这个问题的前提……有点。你有这么多 CSS 文件的事实说明了不必要的膨胀。您可能将您的样式与特定的上下文而不是与内容的类 相结合。查看what they are doing at Yahoo 了解我的意思。

当您的 CSS 不太针对上下文时，它会变得更精简。然后，这会显着减少文件的大小，并通过治愈疾病而不是治疗症状来缓解您的问题。

所以花点时间重新考虑你的 CSS 以确保它只有它需要的大小。然后根据对您有意义的任何内容来组织您的布局。毕竟，将 CSS 布局到多个文件中只是为了您作为开发人员的利益。出于缓存和性能的目的，这些文件将被缩小并合并为一个文件。

CSS 文件的更改可能性较小，因为它们旨在实现最大的不变性，因此非常适合缓存。

Answer 2

查看http://smacss.com/

SMACSS（读作“smacks”）比僵化的框架更具风格指南。 ... SMACSS 是一种检查您的设计过程的方法，也是一种适合这些设计过程的方法 将刚性框架转化为灵活的思维过程。这是一种尝试 记录使用 CSS 时一致的网站开发方法。

我的建议是始终使用预处理器，它使模块化更容易。并使用 SMACSS，因为它是处理 CSS 的最佳方式，尤其是在处理大型样式时。检查 bootstrap repo 以获取示例 https://github.com/twbs/bootstrap/tree/master/less

Answer 3

如果每个页面都有一个样式表，那么每个页面都必须下载一个新文件。那肯定不好。您想利用缓存（这适用于 Web 上的任何内容，而不仅仅是 css），因此最好在整个站点只需要下载一次的较大 css 文件上增加一点开销。然而，这是一个主观问题，因此在某些情况下，将它们分开可能会更好——也许如果一个网站的两个不同部分都需要大量的 CSS。

通常，拥有多个 css 文件仅用于开发，出于性能原因应将它们组合起来。例如，如果我有一个menu.css、header.css 等，那么在部署时它们应该在一个文件中。多个 css 文件更容易被接受的一个例子是当它们被诸如内容管理系统使用的插件系统延迟加载时。因为内容是如此动态，并且插件与 CMS 没有紧密耦合，所以将所有 css 组合起来是没有意义的。这将使添加和删除插件变得非常困难。

哦！除了结合所有的 css，缩小也很棒！

还有像 LESS 和 SASS 这样的库，它们在组织代码和减少需要编写的代码量方面很有用。

Answer 4

最佳做法是为整个网站使用一个外部样式表。如果您可以尝试在需要将它们分开的地方唯一地命名您的类和 id，以便在您的样式中不会混淆它们。这样您就可以从一个文件维护整个网站。

如果您绝对有必要为每个页面使用不同的样式表，则将您需要渲染和加载的大部分样式保留为一个主 css 文件，这些样式不是特定于页面并且出现在所有页面上，然后将其余特定于页面的内容保持在最低限度，这将使您的性能更高，并为自己省去很多麻烦。

您获得的技术债务越少越好。

此外，如果您确实需要多个样式表，并且您需要在多个页面上出现特定页面的样式，我建议您捆绑和合并您的样式表，以将下载量降至最低并保持更高的性能。