html - 单个 css 或多个用于响应式设计 - css 速度

标签 html css responsive-design

他们已经有很多关于许多 css 文件与一个文件的问题,解决方案是使用一个,因为 http 请求较少。这不是我要问的:P

我通常会使用两个 css 文件。一种用于整个站点,另一种用于特定页面覆盖。

我的想法是它会加速 css,因为不需要为页面上的每个元素评估那么多的 css 选择器。

要求客户端再下载一个可缓存的 css 文件似乎值得加速浏览器渲染。特别是对于大型网站或每个页面需要大量自定义 CSS 的网站。

另一方面,页面文件会有额外的媒体查询。

您认为最好的解决方案是什么?

最佳答案

虽然技术上正确的答案需要有关服务器性能、访问者行为以及您正在设计的网站类型的内部信息,但我想解释一下我使用一个或多个 CSS 文档的基本推理。

对于任何小型、基本的网站,我都会坚持使用一个 CSS 文档,不问任何问题。但是,一旦网站变得更加复杂,可能会出现使用更多文档的合理情况。

如果一个网站有几个页面具有非常不同的 CSS 和/或标记,或者一次性页面(例如事件着陆页),或者几种非常不同类型的内容(例如论坛或博客或类似内容),那么我认为在许多文档中拆分样式表是有意义的。

上述样式表的结构同样取决于您正在设计的网站类型。规范化/重置 CSS、通用结构和媒体查询等全局规则可以在一个文档中,同时将特定于页面的规则保存在另一个文档中。

这对我来说很有意义,因为您的访问者可以缓存无论如何都应该在每个页面上使用的基本结构,而无需下载您的博客或事件页面所需的所有 CSS,直到他们实际访问它为止。

关于html - 单个 css 或多个用于响应式设计 - css 速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18667809/

相关文章:

html - Span 的元素内容显示不全

html - Flexbox - 如何自动跳转到下一列?

html - 我正在尝试使用 CSS3 Transitions 实现悬停效果

jquery - CSS 响应式下拉菜单 - 分成两列

css - 在固定宽度容器旁边的两个容器中分配休息空间

html - 如何像 Android 的 RelativeLayout 一样相对于另一个布置 HTML div?

html - CSS 将 Div 推到页面底部

html - 如何向我的表格添加滚动条?

javascript - Java Android - 从 WebView 获取图像

html - 响应式 3 列布局,右列设置为最小宽度