BEM与媒体查询

Question

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

在BEM（如文档说），该块被认为具有通用的风格，这将适用于对网站的元素，比方说我有一个块：

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

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

是通用按钮的目的是这样，如果我是做“另一个”按钮，说“欢迎按钮”不同风格，我可以写变质按钮 - 欢迎这只会增加广告ditional样式.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; 
} 
} 

的通用块风格VS媒体查询的问题出现在边框宽度，行高，其可以针对不同的媒体查询不同的情况。

Answer 1

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