Login with github
Forum /

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.