CSS文件结构

Question

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

首先，如果每个页面都有一个外部样式表，并且“css reset”的include css文件和所有常用元素，你应该如何在页面中使用css？假设你有一个包含标题，你会如何设计它，你会有另一个外部样式表。

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

最后，是否有任何标准的命名约定，例如，如果文件是include，那么它将是'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

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

如果绝对有必要为每个页面设置不同的样式表，那么保留大部分需要呈现和加载的样式，这些样式不是特定于页面的，并且在所有页面上都出现在一个主要的css文件中，然后将页面特定的剩余部分保持在最低限度，这将使您的表现更高，并为您节省很多麻烦。

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

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