Closed. This question is opinion-based 。它目前不接受答案。
想改善这个问题吗?更新问题,以便可以通过 editing this post 用事实和引文来回答。
6年前关闭。
Improve this question
我开始使用 BEM 方法 [BLOCK, ELEMENT, MODIFIER] 并且我对此有疑问。
在名为“参与”的部分中,我有一个表格,因此:
和 CSS:
表单中的类太大,所以告诉我正确的方法是深入一层:
但是我应该如何设计它?
我是这样使用它的:
但我真的相信这不是正确的方法。拜托,有人可以在这里给我一盏灯吗?
如果您仍然需要在
通过这种方式,您可以在需要时随意使用您的表单,并且您还可以将
想改善这个问题吗?更新问题,以便可以通过 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/