CODEWITHSUNDEEP
htmlcssbem
T. Jans
T. Jans

Reputation: 41

How to implement a theme when writing CSS using BEM naming methodology?

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?

Upvotes: 4

Views: 2344

Answers (1)

tadatuta
tadatuta

Reputation: 2025

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

Upvotes: 2

Related Questions