Currently, I am using the BEM CSS naming convention for a project I am currently working on. So far, everything is going smoothly. However, I am faced with the challenge of implementing multiple themes (each with slightly different designs) on the same HTML page. One approach would be to do the following:
.name-of-theme .block1 {
...
}
.name-of-theme .block2 {
...
}
Although this would not strictly adhere to BEM principles, it would allow for a single modifier to be added to the body tag.
Alternatively, I could do the following:
.block1--name-of-theme {
...
}
.block1--name-of-theme {
...
}
This approach would be BEM compliant, but it would also require adding redundant code in the HTML for every affected block, making maintenance more difficult.
Is there a BEM-friendly solution to this problem that does not involve writing redundant code?