html – 如何正确使用BEM

概述我开始使用BEM方法[BLOCK,ELEMENT,MODIFIER],我对它有疑问. 在一个名为“参与”的部分中,我有一个表单,所以： <section class="participate"> <form class="participate__form"> <label for="name" class="participate__form__label"></label> 我开始使用BEM方法[BLOCK,ELEMENT,MODIFIER],我对它有疑问.

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

<section >  <form >    <label for="name" ></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 >  <form >    <label for="name" ></label>    <input type="text" ID="name" name="form__input"/>  </form></section>

但是我该如何设计呢？

我这样使用它：

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

但我真的相信这不是正确的做法.拜托,有人可以给我一个灯吗？

解决方法 首先,您不需要级联.participate .form.最好在同一个DOM节点上使用mix：.participate__form .form.

参与_form__label也是BEM方法的错误用法.使用参与_form-label,或参与form__label,或只是form__label.

我这样做：

<section >  <form >    <label for="name" ></label>    <input type="text" ID="name" name="form__input"/>  </form></section>

参与块和__form元素的样式：

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

和形式本身的风格

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

如果您仍需要在参与上下文中为表单进行自定义,则可以使用修饰符：

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

通过这种方式,您可以随时使用您的表单,也可以将参与块中的原始表单替换为另一个表单,或者甚至使用类似表单的块.

总结

以上是内存溢出为你收集整理的html – 如何正确使用BEM全部内容，希望文章能够帮你解决html – 如何正确使用BEM所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。