css - 网格媒体输入与输出

Question

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

考虑以下方法:

方法 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 提出了一种“更好”的方法吗？有人建议有“更好”的方法吗？有理由使用一个而不是另一个吗？只是风格问题？有人同时使用两者来提供丰富的生活陈述吗？

到目前为止我们推断的内容:

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

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

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

Answer 1

👋 嗨!

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

.mydiv {
  font-size: 14px;

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

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