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. Методология добавляет слой абстракции и на самом деле не заботится о вашей конкретной разметке, поэтому, например, являются ли ваши переключатели (ваш «элемент») прямыми дочерними элементами поля формы (ваш «блок»).