Login with github
Forum /

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.