Question

我只编写了四个月的代码，所以我不知道如何正确使用方法和框架。很久以来，我一直在寻找问题的答案，但一直找不到。我已经看过许多专业编码员介绍BEM和使用BEM的视频，但是没有一个比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，媒体查询不应成为修饰符的一部分。修饰符是在元素中添加一些额外样式/功能的修饰符。例如：

.link {
 // link style
}

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

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

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

因此，您可以使用一条经验法则，只要您想两次添加__，就将其设为一个新块。

为了更好的可读性和类名管理，您还可以在类的前面加上名称空间。您可以read this article以获得有关此内容的详细信息。

它讲述了非常好的概念，例如不同类的前缀。例如，如果一个类是一个组件，则可以像.c-myBlock这样加上前缀。如果它是一个实用程序类，则可以像u-activeLink一样加上其他类似概念的前缀。

希望对您有帮助！

使用BEM时的媒体查询

1 个答案: