Media Queries when using BEM

Question

I have been coding for only four months, so I don't know how to use methodologies and frameworks, correctly. I've searched for answers for my question for a long time, but I haven't been able to find any. I've watched many videos of professional coders explaining BEM and using BEM, but none of them have explained BEM more than the BEM website explains it. If I am using the BEM methodology should everything in my media queries be modifiers?

html {
  font-size: 16px;
  box-sizing: border-box;
}

/************************
HEADER
************************/

/********
BLOCKS
*********/


.main-header {
  text-align: center;
  padding: 0.1rem;
  width: 100%;
}


/********
ELEMENTS
*********/

.main-header__name {
  margin: 0.15rem 0;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.main-header__main-nav {
  padding-left: 0;
  list-style-type: none;
  margin-top: 0;
}

.main-header__main-nav__a-remove-decoration {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  display: block;
}

.main-header__main-nav__li-padding-top{
  padding-top: 0.50rem;
}

/********
MODIFIERS
*********/

/************************
MEDIA QUERIES
************************/
@media (min-width: 48rem) {
/************************
HEADER
************************/

/********
BLOCKS
*********/
.main-header {
  display: flex;
  flex-direction: column;
}

/********
ELEMENTS
*********/
.main-header__main-nav {
  display: flex;
  width: 100%;
  flex-grow: 1;
  justify-content: center;
}

.main-header__main-nav__li-flexgrow {
  flex-grow: 1;
}


/********
MODIFIERS
*********/
}

 <header class="main-header">
   <h1 class="main-header__name">Best City Guide</h1>
    <ul class="main-header__main-nav">
     <li class="main-header__main-nav__li-padding-top main-header__main-nav__li-flexgrow "><a class="main-header__main-nav__a-remove-decoration" href="icecream.html">ice cream</a></li>
     <li class="main-header__main-nav__li-padding-top main-header__main-nav__li-flexgrow"><a class="main-header__main-nav__a-remove-decoration" href="#">donuts</a></li>
     <li class="main-header__main-nav__li-padding-top main-header__main-nav__li-flexgrow"><a class="main-header__main-nav__a-remove-decoration" href="#">tea</a></li>
     <li class="main-header__main-nav__li-padding-top main-header__main-nav__li-flexgrow"><a class="main-header__main-nav__a-remove-decoration" href="#">coffee</a></li>
    </ul>
 </header><!--/.main-header-->

There only few cases where you want to declare one tag as two elements. Here `class="main-header__main-nav__li-padding-top main-header__main-nav__li-flexgrow"` seems wrong. It could be simpler : `class="main-header__li"` — tzi, Mar 19 '19 at 14:05

Tushar Shukla · Accepted Answer · 2019-03-20T05:24:18.087

I'm not a BEM expert but IMO, media queries should not be a part of modifiers. Modifiers are those which add some extra style/functionality in an element. For example:

.link {
 // link style
}

.link--active {
   // modifier
   // attributes of an active link only  
   text-decoration: none;
}

Now, media queries define how an element should look/behave when viewed in some other device/width. It is not actually adding any modification but just defining how it should be looking in other device widths.

Moreover, I've seen that you've come across the need for adding __ (2 underscores) twice in some of your stylings. This also is something that I believe is not required because as you go deep down in some nested HTML layout, you'll have to make very long class names which would eventually become hard to maintain.

Hence, you can use a thumb rule that whenever you feel like adding __ twice, just make it a new block.

For better readability and class names management, you can also prefix your classes with namespaces. You can read this article for detailed information on this.

It tells very good concepts like prefixes for different kinds of classes. For example, if a class is a component then it can be prefixed like .c-myBlock. If it is a utility class then it can be prefixed like u-activeLink and few more similar concepts.

Hope it helps!!

When you want to add `__` twice, you can create a new block, yes! You also can flat the hierarchy and keep only the last child name. For example: `main-header__main-nav__li-padding-top` => `main-header__li` — tzi, Mar 19 '19 at 14:03

Media Queries when using BEM

1 Answers1