BEM与媒体查询

Question

我对BEM中的通用块样式（例如.button）与媒体查询有疑问。

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

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

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

这个通用按钮的目的是，如果我要制作另一个＆＃34;另一个＆＃34;按钮，说＆＃34;欢迎按钮＆＃34;我可以用不同的样式编写modificator按钮 - welcome只会添加其他样式到.button，最后会看起来像这样：

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

这就是Media Queries PROBLEM的用武之地。我的通用.button中定义的填充对于不同的媒体查询可能有所不同。例如 max-width：480px 的填充可以是填充：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没有问题。