需要准确了解BEM的工作原理

Question

我不明白嵌套如何与BEM方法一起使用。

我们说我有class="header"的div。

只能使用标题的子div，我会调用class="header__top"

现在让我们说header__top也有一个子div，我称之为class="header__top__logo-container"

如果header__top__logo-container有孩子，我是否打电话给他 header__top__logo-container__logo或者我是否header__top__logo

这里的参考是我的HTML

<div class="header">
  <div class="header__top">
    <div class="header__top__logo-container">
      <a class="header__top__logo-container__logo" href="/"><img src="./assets/logo.png" alt=""></a>
    </div>
    <div class="header__top__cta-container">

    </div>
  </div>
  <div class="header__bottom">

  </div>
</div>

几个月来我一直对此感到困惑......

Answer 1

解决方案有点主观，但你的布局可以分解成一些逻辑块。

BEM建议不要使用嵌套元素。因此解决方案是嵌套块。

<div class="header">
  <div class="header__top">
    <div class="logo">
      <a href="/">
        <img src="./assets/logo.png" alt="">
      </a>
    </div>
    <div class="cta">

    </div>
  </div>
  <div class="header__bottom">

  </div>
</div>

Answer 2

BEM

<强>乙锁
E lement - block's child's M odifier - 阻止相对

使用BEM方法的主要优点是我们不链接选择器，因此避免选择器优先级引起的错误。

__

使用<header class="header"> <button class="header__button">Header Button</button> </header> <main class="main"> <button class="main__button">Main Button</button> </main> 链接元素。我们想说我们希望在我们的网站上有两种类型的默认按钮。其中一个用于标题，另一个用于主要内容。那我们就有了

block__element

在这种情况下，.header__button符号允许我们区分这些按钮，我们可以在CSS中引用.main__button和.block--modifier。

--

使用<button class="main__button">Default Button</button> <button class="main__button main__button-confirmation">Confirmation Button</button> <button class="main__button main__button--cancel">Cancel Button</button> 修改元素。现在假设在主要部分除了具有通用按钮的默认样式之外，我们希望具有用于确认按钮和取消按钮的特定样式。

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #5C6BC0;
  height: 4em;
  padding: 0 1em;
  color: #FAFAFA;
 }
 
.header__logo {
  margin: 0
}

.header__button {
  margin: 0;
  text-decoration: none;
  color: inherit;
  margin: 0 1em;
  padding: 0.5em;
  border-width: 2px;
  border-radius: 2px;
  border-style: solid;
}

.header__button--primary {
  transition: all 300ms ease-in-out;
  border-color: #FAFAFA;
}

.header__button--primary:hover {
  background: #ef5350;
  color: #212121;
  border-color: #212121;
}

.header__button--secondary {
  border-color: rgba(255, 255, 255, 0.33);
}

 
 

实施例

＆＃13;

＆＃13;

<header class="header">
  <h1 class="header__logo">Logo</h1>
  <nav class="header__navigation">
    <a href="#" class="header__button header__button--primary">Home</a>
    <a href="#" class="header__button header__button--secondary">About</a>
  </nav>
</header>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;