BEM 与媒体查询

Question

我有一个关于 BEM（例如 .button）与媒体查询中的通用块样式的问题。

BEM 中的块（如文档所述）应该具有适用于站点上所有元素的通用样式，假设我有一个块：

我的按钮将具有可重复使用的样式，例如：

.button {
font-family:Verdana;
padding:30px 20px;
}

该通用按钮的目的是，如果我要制作“另一个”按钮，比如使用不同样式的“欢迎按钮”，我可以编写修改器按钮——欢迎它只会向 .button 添加额外的样式结束将如下所示：

<button class="button button--welcome"> </button>

这就是媒体查询问题出现的地方。在我的通用 .button 中定义的填充对于不同的媒体查询可能会有所不同。例如 max-width:480px 的填充可以是 padding: 10px 5px; 这是否意味着我不应该包括填充 我的按钮块？或者，我可以这样做：

.button {
font-family:Verdana;
@media and (max-width: 480px) {
padding:10px 5px;
@media and (max-width: 780px) {
padding:15px 10px;
}
@media and (max-width: 1200px) {
padding:20px 15px;
}
@media and (min-width: 1201px) {
padding:30px 20px;
}
}

通用块样式与媒体查询的问题出现在边框宽度和行高的情况下，对于不同的媒体查询可能会有所不同。

Answer 1

我认为在您的情况下，媒体查询和 BEM 没有问题。