3

I thought about building a grid with a BEM-tree like this:

  • grid
  • grid__row
  • grid__column-group
  • grid__column

There is also content like this teaser block

  • teaser
  • teaser__thumbnail
  • teaser__headline
  • teaser__body
  • teaser__link

If i like to display the teaser elements in different columns of the grid, it leads me to the following 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 just starting with BEM and this just feels flawed, because the styles of different blocks will affect each other.

Is that the correct way of handling? Any suggestion for a better solution?

Jens W
  • 188
  • 6

2 Answers2

2

What you have done isn't incorrect, however I would separate the responsibilities of each component. In my mind a page grid's responsibility is to position the components on the page but should not be required to position elements within the component.

Isolation

The important thing is to always build a component in complete isolation. A component should not have knowledge of its container or rely on it. You should be able to put your component on any page, in any position, and it render correctly. This is one of the important points of this technique.

Single responsibility

From looking at your markup, it appears that your teaser component requires knowledge of the grid to render correctly. I would try to avoid this and include the layout needed for the component in the component itself. It actually looks like the classic media object by Nicole Sullivan, so it is worth taking a look at that. This keeps to the principle that components should have one single responsibility. The grid positions the components on the page and the component positions and styles its elements.

By doing this the teaser component can now be used anywhere, with or without the grid.

kangax
  • 38,898
  • 13
  • 99
  • 135
Colin Bacon
  • 15,436
  • 7
  • 52
  • 72
1

Is that the correct way of handling?

Yes. It is a mix. An official tutorial uses this technique.

In the CSS code, it is convenient to style all the "visual" blocks (like grid) first, then semantic blocks (like teaser). Because semantic blocks are more specific and can overwrite some default rules from the reusable visual patterns.

Paleo
  • 21,831
  • 4
  • 65
  • 76