Quick thought:

I think my ideal BEM-style syntax would be this:

.some_block {...}
  .some_block__some_element {...}
.some_block-some_modifier {...}

.some_block {...}
  .some_block-some_element {...}
.some_block__some_modifier {...} /* OR just: .some_block_some_modifier {...} */

OR POSSIBLY

.some_block {...}
  .some_block-some_element {...}
.some_block\:some_modifier {...} /* colon would need escaping, but I like it, though it looks like a pseudo-element; but maybe that's not a bad thing... */

In any case, I'd never use double hyphen (--) for validation and ugliness reasons. And using an escaped colon (\:) or even an escaped dot (\.) would be interesting, I think. (edited)

I don't know if the element or the modifier should have a stronger utility separation, and which should have the stronger visual separation. Unfortunately, for my preferences, they won't be the same one.

That is, a double-click will highlight _s as if they were words, but not -s, so the utility separation, would be ever so slightly higher for that one, but visually, __ is a strong division.

Anyway, doing it this way allows for better double-click highlighting,

If I wasn't so averse to --, I might even lean toward _ for in-name "spacing", and then -- and - for element and modifier separators, respectively. i.e.

.some_block {...}
  .some_block--some_element {...}
.some_block-some_modifier {...}

This affords the maximum utility for double-click highlighting, allowing easily and accuratly selecting just the block, the element, or the modifier.

Update:

from later the same day

The more I think about it, the more I like my last example, w/ -- separating elements and - separating modifiers, or vice-versa (I feel different ways different days).

But I also like - for elements and \: for modifiers more as well. It's a bit wonky, but it also has the double-click highlighting benefits. You could use any character you like for it, though. \~ (conflict w/ general sibling selector), \= (used in attribute selectors), \% (conflicts w/ Sass' silent selectory, but nothing in CSS selectors at the moment), etc. There's no question it's a hack, but it isn't that bad. Anyway, I like \: best in part because of its similarity to the pseudo-selector syntax. After all, isn't :hover kind of just a modifier in itself? (Granted, using this hack in any way would add some cognitive complexity; "Is this : supposed to be a true pseudo-selector or a modifier?).

Sacrificing the double-click convenience for either elements or modifiers is tough, but if I had to choose, I'd probably pick a different one on different days, but with use, or an examination of my CSS, I could probably find which one would be more useful. I expect -some_element would be more handy, since I use modifiers less, I think.

For the moment, though, all-hyphens works fine for my purposes.

calvinjuarez/BEM-thought.md

Quick thought:

Update: