每个页面需要一个 CSS 文件还是单独的 CSS 文件?

问题描述 投票:0回答:7

当我构建页面时,我想要为每个页面使用单独的样式表还是为整个网站使用一个大型样式表?出于加载目的,单个文件不是更好的做法吗,因为加载时的总 CSS 会更少?

css stylesheet
7个回答
49
投票

使用单个文件,CSS 文件会被缓存,因此减少了为每个访问的新页面下载新文件的需要。

为了提供帮助,我通常通过CSS Cleaner处理我的CSS以减小其文件大小,此外,您也可以使用.htaccessGZip CSS,使其再次变小。

最后将所有 CSS 放在一个文件中将使将来更容易对系统范围内的表示进行更改(这就是我们首先使用 CSS 的全部原因),它也将使调试变得更容易。

编辑,2017 年 5 月

7 年多来发生了很多变化,任何看到这个答案的人都应该考虑研究更新的资产交付方法,尤其是现在 HTTP2 和预处理器更加普遍。


10
投票

一个不同的建议,在开发过程中使用多个样式表,并有一个机制将所有样式表合并到一个 CSS 文件中以进行生产部署。这可能需要在生产部署之前运行一些额外的编码和一些额外的脚本,但对于开发使用和生产使用来说都是理想的选择。如果该过程适当自动化(这并不很难实现),也不会导致任何类型的错误。


4
投票

样式表的主要目的是允许您更改所有页面的设计。如果每个页面上都有

h1 {color:red;}
,后来想将其更改为蓝色,则必须编辑每个页面的样式表。使用一张样式表,您就可以更改颜色并将其反映在整个网站上。

此外,样式表将缓存在用户的计算机上,而不是从每个页面下载。


4
投票

如果您希望网站中的所有页面都具有一致的样式,请对所有常见样式使用一个样式表。否则,您可能会发现维护许多样式表非常困难。必须将更改添加到多个样式表中的每一个中。

仅在单个页面上使用的样式表可以放入单独的样式表中。这对于大型单页样式表和/或不常访问的网页样式表可能最有用。

您的样式表不会在每次页面刷新时重新加载。如果您在主页上引用大型通用样式表,它只会下载一次,并缓存以供将来使用。


3
投票

“出于加载目的,您不想使用更小的样式表吗?因此制作单独的样式表是更好的做法?”

这可能会产生相反的效果,因为使用 1 个样式表可以缓存然后轻松重新加载,而它会使用您的方法不断为每个页面加载新的 CSS 文件。

大多数网站不需要为一种类型的媒体提供多个样式表。但是,如果您的网站在设计上差异很大,我建议您使用一个具有所有常见属性的基本样式表,然后为每个包含差异的页面提供一个辅助样式表。

仅当 CSS 更改足够大以保证使用单独的样式表时才应使用此方法。


1
投票

因为我实际上是一个真正的网络程序员(Java的网络编程东西,而不是像PHP这样的脚本),我必须给你一个意见,我从未见过任何实际的网络设计师给出:

请尽可能将您的 CSS 文件拆分为多个逻辑分区!如果您有一个巨大的风格化表格,请将其 CSS 内容收集到一个文件中,还将实际页面的基本样式收集到另一个文件中,将这些菜单导航 CSS:s 添加到第三个文件中,依此类推。您当然可以在相关的地方重复使用单独的 CSS:,但不要只是将所有内容都塞进一个大文件中!


1
投票

我遇到了这个线程寻求同样的问题..我的想法是这样的结构..

布局.css <--- for structure of the site, links, headings etc that are common across the site. form.css <-- generic form styles reset.css <-- all the document resets if you use them

目前我对所有页面样式使用pages.css..

主页.css 关于.css 画廊.css

© www.soinside.com 2019 - 2024. All rights reserved.