Search code examples
cssbem

BEM and single selectors

This is sort of a theoretical question, but it bugs me for a couple of hours now.

I'm learning BEM and it's great so far, but I have a problem. Let's say I have this code:

<div class="section-hi main-section">
  <h2 class="main-section_header">Blah</h2>
  <p>Generated from the CMS</p>
</div>

How do I target the p to make it good with BEM? Can I just go with

.main-section p

or this would be against the rules? I coudn't find any answers to this, since every example and article about BEM focuses only on classes, and I can't expect my CMS to add different class to every groups of paragraphs.

Solution

  • One of the concepts of BEM is to create reusable components, using an element such as p goes against that.

    Why?

    By specifying p we are restricting the ways in which our component can be used. To display correctly the p tag must be used. For example the following markup would not work with the component.

    <div class="section-hi main-section">
  <h2 class="main-section_header">Blah</h2>
  <span>Generated from the CMS</span> <!-- this will not pick up the styles -->
</div>

    Specificity

    Another important point is BEM aims to keep specificity to a minimum, using single class names. Creating a style with a p increases specificity.

    .main-section p

    It is now hard for me to override this style with a utility class, as it has a higher specificity than a single class.

    More on CSS specificity

    The solution

    So instead the idea is to use class names to describe the element. That way we can choose to use whatever markup we like and the component will display as expected. e.g.

    <div class="section-hi main-section">
  <h2 class="main-section_header">Blah</h2>
  <h3 class="main-section_subHeader>Generated from the CMS</h3> <!-- This will work -->
</div>

    Must I always use class names?

    You will find occasions when it is OK or necessary to create styles for elements and not use class names. For example you may have a component that you only want to be used with certain markup. Then it is perfectly valid to do so.

    Summary

    As a general rule always try and keep to the single class rule unless there is a valid reason not to do so. Otherwise it will trip you up later on down the line.

    For further reading on BEM I recommend this post http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/