Thanks! This is great!
Tom Chen
11

Hi Thomas,

Glad you enjoyed the post! Naming the blocks is entirely up to you, but this is the kind of convention you would want to make at the beginning of a project. 
If you’re planning to reuse the component you’re building (in another project or another context where modifiers would come in handy), I would use generic names like form and panel.

So you would end up with structures like

div.form.form--reset-password
input.form__input
submit.form__submit

where the block is the form, the elements are input and submit and the form has a reset-password modifier (context where you can alter the look of the input and submit buttons).

If it’s an isolated block that only makes sense in a specific context, then you can name it

div.reset-password
input.reset-password__input
submit.reset-password__submit

The second example you posted — `reset-password__form — input` is not really a valid conversion to BEM, since it would translate to:
Block: `reset-password`- ok
Element: `form`- ok, could work
Modifier: `input` — not really ok, since the term ‘input’ relates more to an element, while a modifier is a change in state (like `-- is-active`) or scope (like (`-- condensed`).

Hope this helps understand BEM better!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.