2

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

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

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

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

4

4 回答 4

3

我反对这个问题的前提......有点。你有这么多 CSS 文件的事实说明了不必要的膨胀。您可能正在将您的样式与特定上下文而不是内容耦合。看看他们在雅虎做什么,我的意思是什么。

当你的 CSS 不特定于上下文时,它会变得更精简。然后,这会显着减小文件的大小,并通过治愈疾病而不是治疗症状来缓解问题。

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

并且由于设计为最大不变性而不太可能更改的 CSS 文件是缓存的理想选择。

于 2013-12-24T17:21:17.007 回答
1

检查http://smacss.com/

SMACSS(读作“smacks”)比僵化的框架更具风格指南。... SMACSS 是一种检查您的设计过程的方法,也是一种将这些刚性框架融入灵活思维过程的方法。它试图记录使用 CSS 时网站开发的一致方法。

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

于 2013-12-24T17:09:33.810 回答
1

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

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

哦!除了结合所有的 css,缩小也很棒!

还有一些像LESSSASS这样的库,它们在组织代码和减少你需要编写的数量方面很有用。

于 2013-12-24T17:13:11.760 回答
1

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

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

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

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

于 2013-12-24T18:32:03.770 回答