Search code examples
htmlcssbem

BEM and form inputs

I'm trying out BEM in a new project (a form page) and am looking for the best way to mark up the form inputs.

I have a set of common styles for radio buttons, which I've judged to be an "element" of form field "blocks". So I gave it the class:

.projectField__radio

The radio buttons are not always direct children of .projectField, but they are always descendants of them. So:

Question 1: Is that OK in the context of BEM?

Question 2: For a particular field - call it the "colour" field - I don't have a standard radio button layout. They are part of a field with diagrams that is visually a block of its own on the page, so I've put it into a div:

 .projectColourSettings

How should I mark up the radio buttons? They need the styles from the basic radio buttons, but also need their own as part of the colour settings field.

Is it this?

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

Or perhaps

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

I'm liking BEM so far and it's forcing me to think hard about my markup, but I'm not sure which way to go on this.

Solution

  • I think the latter is the correct option:

    projectField is a block.

    radio is an element inside this block, so you identify it with projectField__radio.

    And, finally, you need to modify this element:

    projectField__radio--colourSettings