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.

Comments

I 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?

Version:7.x-6.x-dev» 7.x-5.x-dev

Yeah. Agreed, they are reversed.

But how do I fix this without breaking everyone's sub-theme that is using the -dev version?

Move changes to a different point release?

Seems like it would have to be another release, yeah.

In the meantime, maybe we should just document this?

So, 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?

Title:BEM element and modifier delimiters seem reversedComponent element and modifier delimiters are reversed
Status:Active» Needs review
StatusFileSize
new21.03 KB

Here's the patch.

StatusFileSize
new102.21 KB

And here's the generated CSS.

Status:Needs review» Needs work

*sigh* variant delimiter was also a single dash. So that needs to be changed to a double dash.

Title:Component element and modifier delimiters are reversedComponent element and modifier delimiters don't match Drupal 8’s convention

Actually, 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.

Status:Needs work» Needs review
StatusFileSize
new22.78 KB

Here's the patch.

Status:Needs review» Reviewed & tested by the community

Patch applies cleanly. Scanned through all of the scss and template changes, all match up with proper replacements.

Great documentation and perfect patch. Thanks for attending to this!

Assigned:Unassigned» JohnAlbin

I'll commit this as soon as 7.x-5.2 gets tagged. And then tag 7.x-5.3.

Status:Reviewed & tested by the community» Fixed

Forgot to mark this fixed.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Issue summary:View changes

added Nicolas Gallagher link