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!