Closed. This question is opinion-based 。它目前不接受答案。












想改善这个问题吗?更新问题,以便可以通过 editing this post 用事实和引文来回答。

6年前关闭。



Improve this question




我开始使用 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
   }
 }
}

但我真的相信这不是正确的方法。拜托,有人可以在这里给我一盏灯吗?

最佳答案

首先,您不需要级联 .participate .form 。最好在同一个 DOM 节点上使用混合:.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 类似的块。

关于html - 如何在 Sass 中正确使用 BEM,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29995020/

10-13 01:57
查看更多