使用 BEM 时的媒体查询

Question

我只写了四个月的代码，所以我不知道如何正确使用方法论和框架。我已经为我的问题搜索了很长时间的答案，但一直找不到任何答案。我看过许多专业编码人员解释 BEM 和使用 BEM 的视频，但其中 none 对 BEM 的解释比 BEM 网站解释的更多。如果我使用 BEM 方法，我的媒体查询中的所有内容都应该是修饰符吗？

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-->

Answer 1

我不是 BEM 专家，但我是 IMO，媒体查询不应该是修饰符的一部分。修饰符是在元素中添加一些额外的 style/functionality 的修饰符。例如：

.link {
 // link style
}

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

现在，媒体查询定义了元素在其他 device/width 中查看时应该如何 look/behave。它实际上并没有添加任何修改，而只是定义它在其他设备宽度下的外观。

此外，我发现您发现需要在某些样式中添加两次 __（2 个下划线）。这也是我认为不需要的东西，因为当您深入某些嵌套 HTML 布局时，您将不得不创建很长的 class 名称，最终将变得难以维护。

因此，您可以使用一个经验法则，每当您想添加 __ 两次时，只需将其设为一个新块即可。

为了更好的可读性和 class 名称管理，您还可以在 classes 前加上名称空间。您可以 read this article 了解这方面的详细信息。

它讲述了非常好的概念，例如不同种类 classes 的前缀。例如，如果 class 是一个组件，那么它可以像 .c-myBlock 这样的前缀。如果它是一个实用程序 class 那么它可以像 u-activeLink 和其他一些类似的概念一样作为前缀。

希望对你有帮助！！

使用 BEM 时的媒体查询

Media Queries when using BEM

css

bem