Thanks! This is great!
Thomas Chen
1

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!