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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

avb’s picture

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?

JohnAlbin’s picture

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?

chrisjlee’s picture

Move changes to a different point release?

rootwork’s picture

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

In the meantime, maybe we should just document this?

JohnAlbin’s picture

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?

JohnAlbin’s picture

Title: BEM element and modifier delimiters seem reversed » Component element and modifier delimiters are reversed
Status: Active » Needs review
FileSize
21.03 KB

Here's the patch.

JohnAlbin’s picture

FileSize
102.21 KB

And here's the generated CSS.

JohnAlbin’s picture

Status: Needs review » Needs work

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

JohnAlbin’s picture

Title: Component element and modifier delimiters are reversed » Component 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.

JohnAlbin’s picture

JohnAlbin’s picture

Status: Needs work » Needs review
FileSize
22.78 KB

Here's the patch.

KrisBulman’s picture

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.

rootwork’s picture

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

JohnAlbin’s picture

Assigned: Unassigned » JohnAlbin

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

JohnAlbin’s picture

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.

Anonymous’s picture

Issue summary: View changes

added Nicolas Gallagher link