CSS-使用BEM时的媒体查询

我只编码了四个月,所以我不知道如何正确使用方法和框架.很久以来,我一直在寻找问题的答案,但一直找不到.我已经看过许多专业程序员解释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,.1),0 0 5px rgba(0,0 1px 3px rgba(0,.3),0 3px 5px rgba(0,.2),0 5px 10px rgba(0,.25),0 10px 10px rgba(0,0 20px 20px rgba(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-->

最佳答案

我不是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

CSS-使用BEM时的媒体查询

相关文章