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罚款。该方法增加了一个抽象层，并不真正关心你的具体标记，所以例如你的单选按钮（你的“元素”）是表单域的直接子节点（你的“块”）。