网格媒体输入与输出

Question

我和一位同事就什么是使用 Neat Grid-Medias 的最佳方式进行了永恒的讨论。

考虑以下方法：

方法A：

.mydiv {
  font-size: 14px;

  @include grid-media($somegridvar) {
    font-size: 18px;
  }
}

然后，考虑一下：

方法 B:

.mydiv {
  font-size: 14px;
}

@include grid-media($somegridvar) {
  .mydiv {
    font-size: 18px;
  }
}

在 Neat 上测试，两种方法都呈现相同的结果，我不会把它放在这里，因为它很明显。

我的问题是：你喜欢什么？ ThoughtBot 建议使用 "better" 方法？有人建议使用 "better" 方法吗？有理由使用一个而不是另一个吗？只是风格问题？有人同时使用两者来提供丰富的生活声明吗？

我们目前推导的结果：

在方法 A 中，我们将在页面上包含多个 Grid Media，这使得代码更难阅读且更加臃肿。另一方面，所有网格媒体将在一条规则中居中，同一规则不会在每个网格媒体的文档上重复。

在方法 B 中，我们将为每个断点提供每个网格媒体的单个块，从而使代码更短，但也会增加元素类出现的位置。

此外，如果这位同事正在阅读本文，我期待着发现我的方法更好。（是的，我不会告诉你是哪一个）

Answer 1

嗨！

我先说代码风格是团队的事。对我们有用的东西，可能对你不起作用。最重要的是，一致性和共同理解才是真正重要的。不要花太多时间在杂草上，小细节。话虽如此，我们（thoughtbot）发布 our code style guides 并更喜欢这种语法（你的“方法 A”）：

.mydiv {
  font-size: 14px;

  @include grid-media($somegridvar) {
    font-size: 18px;
  }
}

为什么？ mydiv 是你正在设计的东西，而不是媒体查询本身。因此，在一个声明块中包含与该选择器相关的所有样式会提供很多清晰度。将影响选择器的样式分布在多个块中可能会变得难以破译。

Grid-Media IN vs OUT