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罰款。該方法增加了一個抽象層，並不真正關心你的具體標記，所以例如你的單選按鈕（你的「元素」）是表單域的直接子節點（你的「塊」）。