3

我开始使用 BEM 方法 [BLOCK, ELEMENT, MODIFIER]，我对此表示怀疑。

在一个名为“参与”的部分中，我有一个表格，所以：

<section class="participate">
  <form class="participate__form">
    <label for="name" class="participate__form__label"></label>
    <input type="text" id="name" name="participate__form__input"/>

  </form>
</section>

和CSS：

.participate {
 &__form {
   // css here
 }
 &__form__label {
   // css here
 }
 &__form__input {
   // css here
 }
}

表格内的班级太大，所以告诉我权利会更深一层：

<section class="participate">
  <form class="participate__form form">
    <label for="name" class="form__label"></label>
    <input type="text" id="name" name="form__input"/>

  </form>
</section>

但是我应该如何设计这个？

我这样使用它：

.participate {
 .form {
   // CSS HERE
   &__label {
   // CSS HERE
   }
   &__input {
   // CSS HERE
   }
 }
}

但我真的认为这不是正确的做法。拜托，有人可以在这里给我一个灯吗？

4

2 回答 2

6

起初，您不需要 cascade .participate .form。最好在同一个 DOM 节点上使用 mix: .participate__form+ 。.form

participate__form__label也是对 BEM 方法的错误使用。使用participate__form-label，或participate-form__label，或只是form__label。

我会这样做：

<section class="participate">
  <form class="participate__form form">
    <label for="name" class="form__label"></label>
    <input type="text" id="name" name="form__input"/>
  </form>
</section>

participate块和__form元素的样式：

.participate {
  &__form {
    // outer styles here
  }
}

form和自己的风格

.form {
  &__label {
    // inner styles here for label
  }
  &__input {
    // and input customization
  }
}

如果您仍然需要在participation上下文中自定义表单，您可以使用修饰符：

.form--god-bless-participation {
  .form__label {
    // label customization
  }
}

通过这种方式，您可以在需要时自由使用您的表单，并且您可以将原始表单替换participate为另一个块，甚至使用form-like 块。

于 2015-05-02T12:10:02.720 回答
1 
<section class="participate">
  <form class="participate__form">
    <label for="name" class="participate__form__label"></label>

在上面，您使用participate了两次，一次用于持有者/父类，第二次作为表单的前缀。

作为父类使用时participate，不需要前缀：

html:

<section class="participate">
  <form class="form">
    <label for="name" class="form__label"></label>

sccs:

.participate {
     form {
        &__label {
        }
     }
}

或者：

<section>
  <form class="participate__form">
    <label for="name" class="participate__form__label"></label>

sccs:

.participate {
     &__form {
        &__label {
        }
     }
}

但是什么时候participate是你的块，你的 HTML 可以根据http://www.integralist.co.uk/posts/bem.html，如下图所示：

<section class="participate">
  <form class="participate__form">
    <label for="name" class="participate__input participate__input--label"></label>
    <input type="text" id="name" name="participate__input participate__input--text"/>
  </form>
</section>

还有你的 SCSS：

.participate {
    &__form {}
    &__input {
        &--label {
        }
        &--text {
        }
    }
}
于 2015-05-02T10:04:11.027 回答