Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.The BEM documentation suggests using two underscores to class elements (sub-modules in SMACSS terminology):
We use hyphen to separate words in long names (for example, block-name) and two underscores to separate the name of the block form the name of the element (block-name__element-name).
They do say "but you can use any other separators for it," but most implementations of it I've seen has followed the double-underscore method, since double-hyphens are used for modifier (variant) names:
A double underscore is for an element, and a double dash is a modifier.
And for instance see Nicolas Gallagher's post, under "Structured class names."
I love seeing the BEM methodology in Zen dev, but it seems like it's using double-hyphens instead of double-underscores for elements/sub-modules (e.g. "block--title" instead of "block__title").
If this is intentional that's fine, in which case this is just a documentation issue. But it wasn't clear to me.
| Comment | File | Size | Author |
|---|---|---|---|
| #11 | 1961360-11-class-delimiters.patch | 22.78 KB | johnalbin |
| #7 | 1961360-generated-css.patch | 102.21 KB | johnalbin |
| #6 | 1961360-6-component-delimiters.patch | 21.03 KB | johnalbin |
Comments
Comment #1
avb commentedI stumbled across this, too. I have the impression that most developers following the OOCSS/SMACSS philosophy are using delimiters the other way round. Since the article about Drupal 8 CSS architecture also proposes the "original" BEM naming convention, are there plans to change the pattern?
Comment #2
johnalbinYeah. Agreed, they are reversed.
But how do I fix this without breaking everyone's sub-theme that is using the -dev version?
Comment #3
chrisjlee commentedMove changes to a different point release?
Comment #4
rootworkSeems like it would have to be another release, yeah.
In the meantime, maybe we should just document this?
Comment #5
johnalbinSo, 7.x-5.2 would have the fubar class naming and 7.x-5.3 (released immediately after) would have the corrected class naming? And docs in 7.x-5.3 would explain the fixes necessary?
Comment #6
johnalbinHere's the patch.
Comment #7
johnalbinAnd here's the generated CSS.
Comment #8
johnalbin*sigh* variant delimiter was also a single dash. So that needs to be changed to a double dash.
Comment #9
johnalbinActually, I remember the thinking more clearly now. The variant delimiter was a single dash; the element delimiter was a double dash. I made that decision before Drupal 8 came to the consensus to use a single dash for multi-word components, a double dash for component variants, and a double underscore for elements.
Comment #10
johnalbinHere's the docs. https://drupal.org/node/2052759
Comment #11
johnalbinHere's the patch.
Comment #12
KrisBulman commentedPatch applies cleanly. Scanned through all of the scss and template changes, all match up with proper replacements.
Comment #13
rootworkGreat documentation and perfect patch. Thanks for attending to this!
Comment #14
johnalbinI'll commit this as soon as 7.x-5.2 gets tagged. And then tag 7.x-5.3.
Comment #15
johnalbinForgot to mark this fixed.
Comment #16.0
(not verified) commentedadded Nicolas Gallagher link