BEM vs Media Queries

Question

I have a question concerning styles for generic blocks in BEM (for instance .button) vs Media Queries.

The block in BEM (as documentation says) is supposed to have generic styles which will be applicable to all elements on site, let's say I have a block:

And my button will have reusable styles like:

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

The purpose of that generic button is so that if I were to make "another" button, say "welcome button" with different styles I can write modificator button--welcome which will only add additional styles to .button which at the end will look like this:

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

This is where Media Queries PROBLEM comes in. Padding defined in my generic .button can be different for different media queries. For instance padding for max-width:480px can be padding: 10px 5px; Does it mean that I should NOT include padding in my button block ? Or, I can do something like this:

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

The issue of generic block styles vs media queries arises in the case of border width, line-height which can be different for different media queries.

Answer 1

I think there is no problem with media queries and BEM in your case.