When is it "OK" to use a bare element selector, without adding a block-level classname?

[Josh68]

First of all, I am completely clear on the flexibility encouraged by the BEM team, and understand that no one can establish definitive rules for creating maintainable CSS.

Anyway, that said, for some reason I can't quite get my head around when it might be "BEM-approved" to use element selectors alone.

Here's an example, in this case written in SASS:

%inline-multiline-dl {
  /*Thanks Lea Verou! (multiline def lists: http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css/)*/
    dt {
      //display: inline-block;
      &:after {
        content: ': ';
      }
    }
    dt,
    dd {
      display: inline;
      margin: 0;
    }
}

%multiline-dl {
  @extend %inline-multiline-dl;
  dd {
    word-break: break-word;
    &:after {
      content: '\A';
      white-space: pre;
    }
  }
}

%inline-dl {
  @extend %inline-multiline-dl;
  dt {
    &:before {
      content: '|';
      margin: 0 8px 0 3px;
      position: relative;
      top: -1px;
      white-space: pre;

    }
    &:first-child {
      &:before {
        content: '';
        margin: 0;
      }
    }
  }
}

dl {
  &.dlist--multiline { //or .dlist_multiline
    @extend %multiline-dl;
  }
  &.dlist--inline { //or .dlist_inline
    @extend %inline-dl;
  }
}

The BEM-ish classnames are right there at the end, and are applied to the block-level definition list, only.

It seems to me that in HTML, the dd and dt elements have no meaning outside of a dl and are likely prohibited from being used in that way. So is it still advised to add element classnames to those elements and their selectors, or does it make sense in BEM to leave it basically like this?

While I'm asking, can someone also explain the decision to switch from double-dashes to single underscores for deliniating modifiers? And did the BEM team ever consider the chainable modifier idea proposed in "BEVM?"

Thanks for any responses.

[Josh68]

Taking a stab at answering my own question, and feel kinda dumb realizing this:

No, it should not be OK in BEM (or other OO-CSS-ish techniques) to mix in element selectors, because they will take precedence over classname selectors, which will defeat the purpose of using the methodology.

The exception, I think, would be base styles you really don't want to ever have overridden. In this case, my example is a particular layout style, and not base styles for all definition lists, so I should not be using element selectors at all.

If anyone else has comments or wants to elaborate, please add on.

[tadatuta]

@Josh68 you are absolutely right about element selector.

can someone also explain the decision to switch from double-dashes to single underscores for deliniating modifiers?

Actually single underscores are original scheme. But it is not important what symbol a developer use as a delimiter as long as it's always consistent on a particular project. For more info please refer to https://en.bem.info/methodology/naming-convention/

And did the BEM team ever consider the chainable modifier idea proposed in "BEVM?

See https://en.bem.info/methodology/faq/#why-include-the-block-name-in-modifier-and-element-names

[Josh68]

Thanks. Curious about the differences between this reference and getbem.com, in terms of why they disagree about deliniators for modifiers. I understand it's simply a choice, but if my project tells other devs I'm using BEM (or a variant of BEM) and it turns out I'm using a syntax no one else is, would be worth knowing any justification for the difference.

And thanks for the link explaining the BEM take on modifiers.