These are chat archives for bem/talk

1st
Jun 2015
Ivan Strelkov
@istrel
Jun 01 2015 10:26

BEM adepts, please tell me, how to solve this problem using BEM:

I have upper element with two possible modifiers _light and _dark (for theme applied). Also I have child elements which have different styles depending on upper element modifier. The first thing that goes in mind is setting classes like

.upper_light .child { background: white; }
.upper_dark .child { background: black; }

But this is not the right way, I guess.

Yuri Tkachenko
@tyv
Jun 01 2015 10:37

@istrel It is called 'inheritance modification' and it is ok. You can do in another way: each component (block) may has own theme modifier, and if you need to style elem, you can do it like

.block_dark .block__elem { background: black; }

it is best way if you want to make a lib of blocks with different themes or make a theme to a lib, that don't have any theme.

Ivan Strelkov
@istrel
Jun 01 2015 10:55
@tyv Thanks
Ivan Strelkov
@istrel
Jun 01 2015 11:29
@tyv Could you please point me to some docs which prove that it is ok to perform inheritance modification in BEM this way?
Yuri Tkachenko
@tyv
Jun 01 2015 14:42
@istrel nope, not sure they are
Alexej Yaroshevich
@zxqfox
Jun 01 2015 14:43
@istrel Just if you will use .child (it's a block, right?) you will have more cohesion
Ivan Strelkov
@istrel
Jun 01 2015 14:44
@zxqfox I just hurried up. I meant .block_dark .block__child { ... }
Alexej Yaroshevich
@zxqfox
Jun 01 2015 14:45
ah
It's vaiable since elements can have only one "parent" block
So it's already connected