css - BEM - How to handle intersection of blocks for grid and content -

css - BEM - How to handle intersection of blocks for grid and content -

i thought building grid bem-tree this:

grid grid__row grid__column-group grid__column

there content teaser block

teaser teaser__thumbnail teaser__headline teaser__body teaser__link

if display teaser elements in different columns of grid, leads me next markup:

<div class="grid__column-group teaser"> <div class="grid__column"> <img class="teaser__thumbnail"/> </div> <div class="grid__column"> <h3 class="teaser__headline">...</h3> <p class="teaser__body">..</p> </div> </div>

i'm starting bem , feels flawed, because styles of different blocks impact each other.

is right way of handling? suggestion improve solution?

what have done isn't incorrect, separate responsibilities of each component. in mind page grid's responsibility position components on page should not required position elements within component.

isolation

the of import thing build component in finish isolation. component should not have knowledge of container or rely on it. should able set component on page, in position, , render correctly. 1 of of import points of technique.

single responsibility

from looking @ markup, appears teaser component requires knowledge of grid render correctly. seek avoid , include layout needed component in component itself. looks classic media object nicole sullivan, worth taking @ that. keeps principle components should have 1 single responsibility. grid positions components on page , component positions , styles elements.

by doing teaser component can used anywhere, or without grid.

css bem