媒体查询和 CSS 性能答案

【问题标题】：Media Queries and CSS Performance媒体查询和 CSS 性能
【发布时间】：2013-06-12 19:08:20
【问题描述】：

我想开始将我的媒体查询嵌套在 SCSS 规则中，就像 Chris Coiyer 在这里解释的那样：http://css-tricks.com/naming-media-queries/

例如

#breadcrumbs {
    display: none;
    @include font-size(13);
    margin: 8px 0 0;
    @include at-least(768) {
        display: block;
    }
}

这似乎是一种更好的方式来组织我的 SCSS，但与继续将它们全部放在一个地方相比，它会导致方式更多的媒体查询。

我认为它会稍微影响 CSS 的性能，但我想我真的在寻找人们的意见。性能是否受到实质性影响，是否值得这样做以方便组织？

【问题讨论】：

【解决方案1】：

你看的少吗？

这是一种非常简洁的 sudo css 编写方式。它编译成css。我认为它可以在不牺牲性能的情况下为您提供所需的可读性。

更多信息：

【讨论】：

【解决方案2】：

如果您关心的是性能，为什么不创建一些页面/CSS 变体并实际测量实际结果呢？通过这种方式，您可以获得真实的指标，并且可以将整个页面视为一个整体，因此您可以保持透视。

我最喜欢的测试站点是http://www.webpagetest.org，还有很多其他站点。

【讨论】：