BEM vs Media Queries

[RobotHabanera]

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 ".button" 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 (I am using border-box so padding are internal styles for .button). For instance padding for max-width:480px can be padding: 10px 5px; Does it mean that I should NOT include padding in my generic .button block because .button will no longer be generic? Or, I can do something like this (but I wonder whether it is valid BEM way):

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

Also, I've seen some generic .button blocks with the following code:

.button {
  padding: 0.75em 1.25em;
  border-radius: 4px;
  background-color: green;
  color: white;
  font-size: 1em;
  line-height: 1.5em;
  transition: all 0.15s ease-in-out;
}

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.

I've seen the documentation about external geometry/positioning, but padding is not external geometry: https://en.bem.info/methodology/css/#external-geometry-and-positioning

My issue here is different.

[tadatuta]

@RobotHabanera

The solution you suggested with MQ inside .button is fine but remember that you need some pre- or postprocessor to convert it to valid CSS. And maybe something like https://www.npmjs.com/package/postcss-move-media to optimize the resulting CSS at the end.

[RobotHabanera]

Thanks.

I am using sass preprocesor with gulp.

This issue with media queries arose because after reading documentation on this site about generic blocks I understoond that block styling "should not change" but today I thought what about media queries?"

For instance I might have:

<section class="services">
    <h2 class="services_heading"></h2>
</section>'''

.services styles might need padding-top:100px in resolution above 1200px, but only padding-top:50px in resolution of 400-500px width, therefore I became confused whether with adding media queries to .services generic block would be "according to the BEM rules" due to the "not changing" nature of generic blocks.

[tadatuta]

BEM is fine with MQ :)