1

我正在一个新项目（表单页面）中尝试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，它迫使我认真思考我的标记，但我不确定该走哪条路。

4

2 回答 2

2

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

projectField是一个块。

radio是这个块内的一个元素，所以你用 . 来标识它projectField__radio。

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

projectField__radio--colourSettings
于 2016-01-22T13:15:14.533 回答
1

回答您的问题 1：是的，我认为这在 BEM 中非常好。该方法添加了一个抽象层，并不真正关心您的特定标记，例如，您的单选按钮（您的“元素”）是否是表单字段（您的“块”）的直接子级。

于 2016-01-22T13:25:28.003 回答