How to use BEM correctly with Sass
I am starting to use the BEM [BLOCK, ELEMENT, MODIFIER] methodology and I doubt it.
Inside the "participate" section, I have a form, so:
<section class="participate">
<form class="participate__form">
<label for="name" class="participate__form__label"></label>
<input type="text" id="name" name="participate__form__input"/>
</form>
</section>
And the CSS:
.participate {
&__form {
// css here
}
&__form__label {
// css here
}
&__form__input {
// css here
}
}
The class is too big inside the form, so I was told that the right would go one level:
<section class="participate">
<form class="participate__form form">
<label for="name" class="form__label"></label>
<input type="text" id="name" name="form__input"/>
</form>
</section>
But how should I style this?
I use it like this:
.participate {
.form {
// CSS HERE
&__label {
// CSS HERE
}
&__input {
// CSS HERE
}
}
}
But I really think this is the wrong approach. Please, can someone give me some light here?
You don't need a cascade at first .participate .form
. Better to use mix: .participate__form
+ .form
on the same DOM-node.
participate__form__label
is also a misuse of the BEM methodology. Use participate__form-label
either participate-form__label
, or simply form__label
.
I would do like this:
<section class="participate">
<form class="participate__form form">
<label for="name" class="form__label"></label>
<input type="text" id="name" name="form__input"/>
</form>
</section>
Styles for the block participate
and __form
:
.participate {
&__form {
// outer styles here
}
}
And styles for yourself form
.form {
&__label {
// inner styles here for label
}
&__input {
// and input customization
}
}
If you still need customization for your form in participation
context, you can use modifiers:
.form--god-bless-participation {
.form__label {
// label customization
}
}
This way you can use your own shape whenever you need it, and you can also replace the original shape in the block participate
with another or even a form
-like block.
source to share
<section class="participate">
<form class="participate__form">
<label for="name" class="participate__form__label"></label>
In the above example, you are using participate
twice, once for the owner / parent class and the second time as a prefix for your form.
When used participate
as a parent class, you don't need a prefix:
HTML:
<section class="participate">
<form class="form">
<label for="name" class="form__label"></label>
SCCS:
.participate {
form {
&__label {
}
}
}
Or alternatively:
<section>
<form class="participate__form">
<label for="name" class="participate__form__label"></label>
SCCS:
.participate { &__form { &__label { } } }
But when participate
is your block, your HTML can match http://www.integralist.co.uk/posts/bem.html like below:
<section class="participate">
<form class="participate__form">
<label for="name" class="participate__input participate__input--label"></label>
<input type="text" id="name" name="participate__input participate__input--text"/>
</form>
</section>
And your SCSS:
.participate { &__form {} &__input { &--label { } &--text { } } }
source to share