Thanks! This is great!
Tom Chen

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


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


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.