css - 媒体查询和 CSS 性能

Question

我想开始在 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 的性能，但我想我真的在寻找人们的意见。性能是否受到实质性影响，是否值得这样做以方便组织？

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

你看的少吗？

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

更多信息：

2 回答 2