Consider BEM for CSS Coding Standards in Drupal 8 [#1900768]

I would like to discuss the possibility of adopting BEM for Drupal 8 CSS class naming. BEM means 'block, element, modifier' and is a syntax for CSS class naming that plays very nicely with Object Oriented / Modular CSS concepts.

Please read http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-s... for further information.

Currently, the syntax proposed by BEM is not even possible in D7/D8 because of the way drupal_html_class() and drupal_clean_css_identifier() work together (they turn underscores into hyphens).

I see great potential in this concept for making theming in Drupal much more enjoyable.

Comments

Comment #1

fubhy CreditAttribution: fubhy commented 28 January 2013 at 11:24

Apparently http://drupal.org/node/1887918 already covers this concept... Awesome! So what's left to discuss?

Comment #2

fubhy CreditAttribution: fubhy commented 28 January 2013 at 11:27

Status:

Active

» Fixed

I consider this fixed then... sorry for the noise. I guess we should continue with setting up issues to actually get our hands dirty and implement the coding standards once the deadline for adjustments is due.

Comment #3

Vitaliy CreditAttribution: Vitaliy commented 28 January 2013 at 13:31

".block--modifier{}"
oh no,
much better to use original BEM
.block_modifier{}

cause some times you need
.block_modifier1_modifier2{}

Comment #4

fubhy CreditAttribution: fubhy commented 28 January 2013 at 14:39

.block--modifier == modifier
.block__element == sub-element.

e.g.

.human__hand == hand of a human
.human--female__hand == hand of a woman :)

Comment #5

andypost

he/him

Russian

CreditAttribution: andypost commented 28 January 2013 at 18:41

Probably better to move this issue to D9 queue!

Comment #6

fubhy CreditAttribution: fubhy commented 28 January 2013 at 19:00

@andypost: The folks around JohnAlbin have already adopted it for the D8 CSS Standards (@see the link that I posted).

And I'd have to strongly disagree. If we don't do things like this for D8, it will be too late. This is our opportunity to provide modern CSS and HTML. We don't want to wait for D9 for this stuff.

Comment #7

ry5n CreditAttribution: ry5n commented 28 January 2013 at 23:01

@fubhy agreed. I posted the relevant changes to the draft CSS standards not even two days ago, basically the same recommendation as this issue. I take it as a sign that a lot of folks independently want this, and now is the time. If we can get enough dedicated front-end people in agreement and make a big push in cooperation with the Twig project, this can happen for D8.

It will be a major topic in this week's Mobile Initiative meetings, so everyone interested should check it out. There are two versions to help accommodate time zones: http://groups.drupal.org/mobile