css - BEM 与媒体查询

Question

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

BEM 中的 block (如文档所述)应该具有适用于网站上所有元素的通用样式，假设我有一个 block :

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

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

那个通用按钮的目的是，如果我要制作“另一个”按钮，说出不同样式的“欢迎按钮”，我可以编写修饰符按钮——欢迎，它只会向 .button 添加额外的样式，在结束看起来像这样:

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

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

.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;
}
}

通用 block 样式与媒体查询的问题出现在边框宽度、行高对于不同的媒体查询可能不同的情况下。

Answer 1

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