在元素中嵌套@media规则

Question

为每个@media单独嵌套class规则是一个好习惯，还是最好创建@media并将所有类嵌套在里面？
哪种方法在加载页面的速度方面更有效？

/* 
 * Sass or Less 
 */

/* example_1 */
.class1 {
  width: 100%;

  @media screen and (min-width: 740px) { 
    width: 50%;
  }
}

/* example_2 */
.class1 {
  width: 100%;
}

.class2 {
  color: #000;
}

@media screen and (min-width: 740px) { 
  .class1 {
    width: 50%;
  }

  .class2 {
    color: #faa;
  }
}

Answer 1

我认为这取决于您要编写的代码量。它没有任何问题，但是每个类中嵌套的数百个不同的媒体查询可能很难维护。在我看来，一个好的做法，特别是对于大项目，将为每个媒体查询阈值使用单独的文件，以便尽可能地保持CSS的组织。 例如：

style.less

.class1 {
  width: 100%;
}

.class2 {
  color: #000;
}

@media screen and (min-width: 740px) { 
  @import "min740.less";
}

min740.less

.class1 {
  width: 50%;
}

.class2 {
  color: #faa;
}

如果您要编写单独的组件，例如按钮或排版，您可以将所有相关的媒体查询保存在同一个文件中，以便拥有一个完全独立的CSS模块（基本上是您的第二个示例）。

在速度和性能方面，显然总是建议在生产中使用已编译的LESS，但考虑到您的示例，单个媒体查询选择器将更有效，因为在＆＃34; example1方式＆＃34;媒体查询选择器将被多次复制：

.class1 {
  width: 100%;
}
@media screen and (min-width: 740px) {
  .class1 {
    width: 50%;
  }
}
.class2 {
  width: 100%;
}
@media screen and (min-width: 740px) {
  .class2 {
    width: 50%;
  }
}