БЭМ и форма ввода

Я пробую БЭМ в новый проект (страница формы) и я ищу лучший способ разметки входных данных формы.

У меня есть набор общих стилей для переключателей, которые я считаю «элементом» поля формы «блоки». Итак, я дал ему класс:

.projectField__radio

Радиокнопки не всегда являются прямыми потомками .projectField, но всегда являются их потомками. Так:

Вопрос 1. Это нормально в контексте БЭМ?

Вопрос 2. Для определенного поля — назовем его полем «цвет» — у меня нет стандартного расположения переключателей. Они являются частью поля с диаграммами, которое визуально представляет собой отдельный блок на странице, поэтому я поместил его в блок div:

 .projectColourSettings

Как мне разметить радиокнопки? Им нужны стили из основных переключателей, но также нужны свои собственные как часть поля настроек цвета.

Это это?

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

Или, возможно,

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

Мне пока нравится БЭМ, и это заставляет меня серьезно задуматься о моей разметке, но я не уверен, что делать дальше.


html css bem
person Iainure    schedule 22.01.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я думаю, что последний вариант является правильным:

projectField – это блок.

радио — это элемент внутри этого блока, поэтому вы идентифицируете его с помощью projectField__radio.

И, наконец, вам нужно изменить этот элемент:

projectField__radio--colourSettings
person stig-js    schedule 22.01.2016

arrow_upward
1
arrow_downward

Чтобы ответить на ваш вопрос 1: да, я думаю, что в БЭМ это прекрасно. Методология добавляет уровень абстракции и на самом деле не заботится о вашей конкретной разметке, например, являются ли ваши переключатели (ваш «элемент») прямыми дочерними элементами поля формы (ваш «блок»).

person Maëlig    schedule 22.01.2016
comment
Спасибо - да, это имеет смысл. - person Iainure; 25.01.2016