BEM和表单输入

Question

我在新项目（表单页面）中尝试BEM，并且正在寻找标记表单输入的最佳方法。

我有一组常用的单选按钮样式，我认为它是表单字段“块”的“元素”。所以我给了它上课：

.projectField__radio

单选按钮并不总是.projectField的直接子项，但它们始终是它们的后代。所以：

问题1 ： 在BEM的背景下可以吗？

问题2 ： 对于特定字段 - 将其称为“颜色”字段 - 我没有标准的单选按钮布局。它们是一个字段的一部分，图表在视觉上是页面上的一个块，所以我将它放入div：

 .projectColourSettings

我应该如何标记单选按钮？他们需要基本单选按钮中的样式，但也需要自己作为颜色设置字段的一部分。

这是吗？

<input class="projectField__radio projectColourSettings__radio" type="radio"  value=1 />

或者

<input class="projectField__radio projectField__radio--colourSettings" type="radio"  value=1 />

到目前为止，我很喜欢BEM，这迫使我不得不考虑我的标记，但我不确定采用哪种方式。

Answer 1

我认为后者是正确的选择：

projectField是块。

广播是此块中的元素，因此您可以使用projectField__radio识别它。

最后，您需要修改此元素：

projectField__radio--colourSettings 

Answer 2

回答你的问题1：是的，我认为这在BEM中完全没问题。该方法添加了一层抽象，并不真正关心您的特定标记，例如，您的单选按钮（您的＆＃34;元素＆＃34;）是否是表单字段的直接子项（您的＆＃34）嵌段＆＃34）。