Search code examples
csssassbem

How should page-specific styling be applied to BEM blocks?

Suppose we have a block element named .button which we want to reuse with different margin values on multiple different pages.

Possible solutions:

//1. Nested styles 
.page-1 {
    .button { margin: 10px; }
}

.page-2 {
    .button { margin: 20px; }
}

//2. Specific modifier for EACH page
.button {
    &--pg-1-margin { margin: 10px; }
    &--pg-2-margin { margin: 20px; }
}

// 3. Special, page-specific block level element
// which will be COMBINED with an existing block-level 
// element (ex: <button class="button page-1-element">...</button>)
.page-1-element { margin: 10px; }
.page-2-element { margin: 20px; }
  1. Which one of these will be considered BEM-friendly way?
  2. Is the first method acceptable / preferred way if there are too many different margins used?
Solution

  • Here's the answer to your question in official docs: https://en.bem.info/methodology/css/#external-geometry-and-positioning