Question

我有以下的HTML

<div class="listing listing--with-margin">
    @foreach($recipients as $recipent)
      <span class="listing__item">{{ $recipent }} <input type="checkbox"></span>
      <span class="listing__item">{{ $recipent  }} <input type="checkbox"></span>
    @endforeach

复选框上的课程应该是

<input type="checkbox" class="listing__input">

或

 <input type="checkbox" class="listing__item listing__input">

我认为允许我编写的选项1在sass中使用较少的嵌套更加清晰。

Answer 1

如果您查看BEM documentation中的命名页面，您会在底部看到一个带有表单块的示例部分。

在示例中，您会找到<form>元素，其中包含几个<input />个。

每个<input>都有拥有的元素类.form__input或.form__submit，它们都继承自块.form类。它们不会继承一个类。

但是，您会注意到它们有多个修饰符类，这是可以接受的。

Answer 2

孙子元素有3个选项。

孙子孙女

<article class="post">
  <div class="post__meta">
    <div class="post__category">...</div>
    <div class="post__date">...</div>
  </div>
  ...
</article>

创建新块

<article class="post">
  <div class="post__meta">
    <div class="category post__category">...</div>
    <div class="date post__date">...</div>
  </div>
  ...
</article>

扩展BEM命名约定

<article class="post">
  <div class="post__meta">
    <div class="post__meta__category">...</div>
    <div class="post__meta__date">...</div>
  </div>
  ...
</article>

BEM嵌套命名约定 - 孙元素

2 个答案: