时间戳

首页 > 解决方案 > 使用 BEM 时的媒体查询

css - 使用 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-->

标签： cssbem

解决方案

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

.link {
 // link style
}

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


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

此外，我发现您遇到了__在某些样式中添加（2 个下划线）两次的需要。这也是我认为不需要的东西，因为当您深入到一些嵌套的 HTML 布局中时，您将不得不制作非常长的类名，这最终会变得难以维护。

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

为了更好的可读性和类名管理，您还可以为类添加命名空间前缀。您可以阅读本文以获取有关此内容的详细信息。

它讲述了非常好的概念，例如不同种类的类的前缀。例如，如果一个类是一个组件，那么它的前缀可以是.c-myBlock. 如果它是一个实用程序类，那么它可以加上前缀 likeu-activeLink和几个类似的概念。

希望能帮助到你！！

推荐阅读