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 CreditAttribution: 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 CreditAttribution: 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 CreditAttribution: 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) CreditAttribution: commentedadded Nicolas Gallagher link