3

I use the BEM CSS naming convention on a project i'm working on. Everything peachy so far. However i need to implement several themes (meaning slighly different designs) on the same html page. Writing this:

.name-of-theme .block1 {
    ...
}

.name-of-theme .block2 {
    ...
}

wouldn't be BEM but would allow to put a single modifier in eg the body-tag.

Writing this:

.block1--name-of-theme {
   ...
}

.block1--name-of-theme {
   ...
}

would be BEM but would also mean writing a lot of redundant code in HTML as every affected block would have to be modified with an additional CSS class. This would also be hard to maintain.

Is there a BEM compatible way of solving this without writing redundant code?

T. Jans
  • 31
  • 3
  • Well, you chose BEM as your naming system, it's not like somone's going to hit you for choosing class names as you wish, why don't you decide by yourself what you'd prefer? Not using BEM won't make your code non-functionals. – Clemens Himmer Jun 07 '16 at 09:10
  • To answer your question tho, no, BEM is in itself redundant. And imho BER is a rather bad naming system, it allows you no inheriting and nesting dependencies, which i think result in way cleaner code. But after all that's opinion-based. – Clemens Himmer Jun 07 '16 at 09:12
  • well i would probably hit myself for not sticking to my own chosen conventions. but as you say - it's all opinion based. cheers for taking the time. – T. Jans Jun 08 '16 at 07:32
  • well, that's the point, you chose your namimg method for some reason, so i assume you should know what to do with it ;) – Clemens Himmer Jun 08 '16 at 07:35

1 Answers1

2

Let me cite a piece of FAQ on bem.info:

nesting is appropriate for changing elements depending on the state of a block or its assigned theme

tadatuta
  • 2,007
  • 11
  • 12