BEM and single selectors

Question

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.

score 6 · Accepted Answer · answered Aug 07 '15 at 08:44

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.

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/

Like I said before, "I can't expect my CMS to add different class to every groups of paragraphs". How can I expect WordPress or any other system to add classes to each parameter or list item? — Tomek Buszewski, Aug 07 '15 at 09:30
One solution can never fit all situations. It's about understanding the principles and how you can apply them to a situation. If you have to style elements you have no control over then you adjust your approach to fit that situation. The important thing is you understand the trade offs that comes with it — Colin Bacon, Aug 08 '15 at 17:31

score -5 · Answer 2 · edited Aug 05 '15 at 06:30

-5

If we just look on this code - you can do that, but what if you have more <p> elements? If you can't add class to every element, you can always add id and call element by

 #element_id{ }

edited Aug 05 '15 at 06:30

Shrinivas Pai

7,491
4
29
56

answered Aug 05 '15 at 06:25

Jara Skuder

91
2
16

1

`#id` should be used very carefully and sporadically, if even. It's very bad against specificity. And my question is strictly about BEM, not CSS itself. – Tomek Buszewski Aug 05 '15 at 06:54