3

I have a simple HTML and CSS with BEM. I want style for class .block__item-header-mark inside class .block__item-header--has-round. I use CSS .block__item-header--has-round .block__item-header-mark { /styling here/ }. But I don't think this is good syntax.

My question is:

  1. How to call .block__item-header-mark inside .block__item-header--has-round with better syntax in my SCSS code ?
  2. My BEM syntax is good ?

Code

.block {
  &__item {
    &-header {
      &--has-round {
        /* How to call .block__item-header-mark with better syntax ??? */
        .block__item-header-mark {
          /*overide style*/
        }
      }
      &-mark {
        /*normal style*/
      }
    }
  }
}
<div class="block">
  <div class="block__item">
    <div class="block__item-header block__item-header--has-round"><span class="block__item-header-mark"></span></div>
    <div class="block__item-body"></div>
  </div>
</div>
Community
  • 1
  • 1
Phát Nguyễn
  • 155
  • 2
  • 16
  • 2
    That's a perfectly fine approach. – Obsidian Age Jul 15 '19 at 03:14
  • 1
    BEM classes on your HTML is perfect. On CSS, I don't think you need to use all the hierarchy as if you need some selector to override your style, the math will be hard. Limit the specificity of your CSS selector as possible – Toan Lu Jul 15 '19 at 05:23

1 Answers1

1

You can create a variable to refer to the scope you want

.block {
  &__item {
    &-header {
      $header: &;
      &--has-round {
        #{ header }-mark {
          /* override style */
        }
      }
      &-mark {
        /*normal style*/
      }
    }
  }
}
iagowp
  • 2,428
  • 1
  • 21
  • 32
  • `&--has-round &-mark` <- wouldn't this violate BEM? – zerkms Jul 15 '19 at 05:15
  • @zerkms I don't think it violates, but then again, I haven't used BEM in a while and I could be wrong – iagowp Jul 15 '19 at 14:41
  • https://en.bem.info/methodology/quick-start/ "this block structure is always represented as a flat list of elements in the BEM methodology:" BEM implies you don't use cascade. – zerkms Jul 15 '19 at 20:32
  • @zerkms `has-round` is a modifier, so the actual mistake I see is it should be `&_has-round &-mark` – iagowp Jul 16 '19 at 02:38
  • Yep, but `&--has-round &-mark` is cascade and is not "flat" anymore. – zerkms Jul 16 '19 at 02:57
  • In my head modifiers weren't flat. Cascade has a very different meaning than the opposite of flat, so that got me confused a bit in your second comment. I'll edit my answer – iagowp Jul 16 '19 at 04:17