CSS BEM child tag selectors?

Question

Using CSS BEM methodology...

Say I have some HTML, something like this (which is just example HTML made up for this question):

<section>
  <div>
    <p>Text.</p>
    <p>Text.</p>
    <p>Text.</p>
    <p>Text.</p>
    <p>Text.</p>
  </div>
</section>

From what I've read, I should be doing this:

.section { ... }
.section__sometext { ... }
.section__text { ... }

<section class="section">
  <div class="section__sometext">
    <p class="section__text">Text.</p>
    <p class="section__text">Text.</p>
    <p class="section__text">Text.</p>
    <p class="section__text">Text.</p>
    <p class="section__text">Text.</p>
  </div>
</section>

Rather than this:

.section {}
.section__sometext { ... }
.section__sometext p { ... }

<section class="section">
  <div class="section__sometext">
    <p>Text.</p>
    <p>Text.</p>
    <p>Text.</p>
    <p>Text.</p>
    <p>Text.</p>
  </div>
</section>

Is it ok to use .section__sometext p { ... }..?

The problem I have is that there may be lots and lots of p's, and giving them all long class names just seems like a waste of time and markup.

Using .section__sometext p { ... } will only ever style p's within the section__sometext element, within the section block.

UPDATE

I do realise that there are several different variations of BEM. There seems to be no hard-and-fast spec to refer to which talks about this issue. But I'm really asking this question with a view to following BEM as close as possible.

So my question really is asking:

Using BEM, can I reference tag selectors in my CSS..?
Using BEM, do all selectors in my CSS have to be class selectors..?

Hm, I would rather use a block here. Maybe don't define the class `section` on a `
` element. Better define the underlying `
` as a block. — Ramiz Wachtler, May 05 '17 at 14:06
My question really relates to the `p`'s - add classes to them or not. It's not about where the block sits. If the block was on the `div`, would that make a difference as to whether or not to put classes on the `p`'s..? — Stephen Last, May 05 '17 at 14:10
I meant to not define any classes on `
` , in my opinion it would be better/cleaner to define the `
` as block and access the `
` through `.block > p`. So you can style your inner elements by just defining a parent block. — Ramiz Wachtler, May 05 '17 at 14:17
So, you're saying that when using BEM, it's ok to include tag selectors in your CSS, and not everything has to be a class selector..? My example HTML is just that, an example, in reality the `div` may not be the only thing in my block, so again, my question isn't about where a block sits, but whether or not it's ok to use tag selectors and avoid adding the same class to many tags. — Stephen Last, May 05 '17 at 14:23
I would say yes, it's ok to use tag selectors. There are probably some people who have a different opinion, but I think that it should be readable and easy to understand rather then produce overhead in the HTML (just my opinion). — Ramiz Wachtler, May 05 '17 at 14:30

score 9 · Accepted Answer · answered May 05 '17 at 15:37

9

My advice would be to stay pragmatic; don’t follow anything to the letter just because. Take whichever approach feels best right now (it sounds like you’re leaning toward .section__sometext p {}), and if it turns out to have been the wrong thing then refactor it later.

This is general advice I would hand out to anyone: instead of being paralysed, just do something and see how it pans out. It might work perfectly, and if not then you can just refactor it later.

answered May 05 '17 at 15:37

csswizardry

591
2
11

You are basically answering: "don't stick to bem, use whatever you want". It is not what the author is asking. Besides, "do whatever you want" is not the correct approach when you are working with the team. It can also create issues later on (bugs, ugly code, etc.) – Noname Jul 27 '21 at 11:43

CSS BEM child tag selectors?

1 Answers1