Can you explain a bit more using the example I gave in the original post?
BEM avoids nested structures, so in your example the right visualization of all elements looks rather like this:
.container .container__form .container__input .container__label
And using SASS you can write this one so:
.container { &__form {} &__input {} &__label {} }
what if I have more divs inside form, say form_wrapper, form_inputfield etc ?
It's up to you what you decide but as long as nested elements are part of your block element, you should use block__element pattern.
block__element
If you start to have problems with this flat structure, it is a good sign that you should start a new block - you can use block inside another block:
form.form label.form__label input.form__input button.button span.button__label
For clarity in this example I omitted most of the markup, so you can see the HTML structure and BEM structure.
Oh okay I got it now! I one block isn't enough, you create another block inside it. Thanks man.✨
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Can you explain a bit more using the example I gave in the original post?
BEM avoids nested structures, so in your example the right visualization of all elements looks rather like this:
And using SASS you can write this one so:
what if I have more divs inside form, say form_wrapper, form_inputfield etc ?
It's up to you what you decide but as long as nested elements are part of your block element, you should use
block__element
pattern.If you start to have problems with this flat structure, it is a good sign that you should start a new block - you can use block inside another block:
For clarity in this example I omitted most of the markup, so you can see the HTML structure and BEM structure.
Oh okay I got it now! I one block isn't enough, you create another block inside it. Thanks man.✨