These are chat archives for bem/talk

9th
Jul 2015
Vasiliy Yorkin
@vyorkin
Jul 09 2015 17:23
hey! I've got some stupid question for you guys
Alexej Yaroshevich
@zxqfox
Jul 09 2015 17:24
Oh, really?
Vasiliy Yorkin
@vyorkin
Jul 09 2015 17:24
For example I have class .form, .form__button, .form__button--submit, than comes .form--sign-up with --sign-up modifier specifically for sign-up form
and than I need to introduce another modifier like form--sign-up__button--submit sign-up form submit button
and than I have class names like
form__button form__button--submit form--sign-up__button--submit
is it ok or I completely don't understand bem?
Anton Winogradov
@awinogradov
Jul 09 2015 17:29
It is not ok:)
Vasiliy Yorkin
@vyorkin
Jul 09 2015 17:29
so form--sign-up__button--submit is the "modified" element of the "modified" .form--sign-up block
Anton Winogradov
@awinogradov
Jul 09 2015 17:32
Block modifiers can't contain elems
Vasiliy Yorkin
@vyorkin
Jul 09 2015 17:33
should I instead create just another button modifier class?
like .form__button--signup?
Anton Winogradov
@awinogradov
Jul 09 2015 17:33
Yes;)
Vasiliy Yorkin
@vyorkin
Jul 09 2015 17:34
ok, thanks)
Anton Winogradov
@awinogradov
Jul 09 2015 17:34
You understand BEM:) don't worry!
Vasiliy Yorkin
@vyorkin
Jul 09 2015 17:37
I was confused because I put each of my components in a separate folder, but .form__button--signup seems like a global element modifier to me, not related to my component (SignUpForm)
Anton Winogradov
@awinogradov
Jul 09 2015 17:42
All selectors should be as independent as possible. Why do you care?
Vasiliy Yorkin
@vyorkin
Jul 09 2015 17:44
Yeah, I understand now
Aleksei Gurianov
@Guria
Jul 09 2015 18:39

@vyorkin I'll propose you another solution:

.button - common styles for buttons as button block

.form__button - styles describes differences for buttons which are parts of the form (class="button form__button")

.form__button--submit - styles describes differences for submit button of form (class="button form__button form__button--submit")

.form--sign-up .form__button--submit - styles describes differences for submit button of sign-up form (class="button form__button form__button--submit" inside DOM-node with class=".form .form--sign-up")

PS. There is forum on bem.info site made for such sort of questions. You can move your question there to get answers from more broad community and BEM-team.
Vasiliy Yorkin
@vyorkin
Jul 09 2015 20:36
@Guria good point, I like it, thanks for clear explanation