大量的媒体查询是否分散在文件中?

Question

我正在使用stylus编写css，我喜欢尝试在许多文件/目录中包含更小更易于管理的样式片段/模块。

是否可以在每个这些文件中都有媒体查询，因此查询仅与相同样式/css文件中的样式相关?这会导致任何类型的性能问题(除了我的css文件更大，由于多个查询语句)?

如

//a.sty
#a ...
@media only screen and (min-width: 480px)
  #a ...

@media only screen and (min-width: 900px)
  #a ...

…

//b.sty
#b ...
@media only screen and (min-width: 480px)
  #b ...

@media only screen and (min-width: 900px)
  #b ...

Answer 1

第一个问题:

是否可以在每个这些文件中都有媒体查询，因此查询仅与相同样式/css文件中的样式相关?

是的，我看过很多长响应。样式文件，它们并不漂亮。最好将媒体查询分离到它们所属的文件中。

提醒一句。将您的媒体查询值保存在一个文件中(例如variables.styl)，否则当您以后想要更改它们时，您将很快后悔。

要在Stylus中实现此功能，我需要做以下操作:

In variables.styl

    smartphoneWidth = 748px
    tabletWidth     = 1012px
    mqSmartphone = "only screen and (max-width: " + smartphoneWidth + ")"
    mqTablet     = "only screen and (max-width: " + tabletWidth     + ")"

现在在你的其他手写笔文件中你可以使用:

    @media mqSmartphone
        // Styles go here
    @media mqTablet
        // Styles go here

第二个问题:

这会导致任何类型的性能问题(除了我的css文件更大，由于多个查询语句)?

多个查询不应该显著影响css解析效率。