Search code examples
cssbem

Bem nested naming

Let's say I have panel block with cards inside of it each I want to make block, so it should be something like:

.control-block
  .control-panel
    .control-results
      .card
        .card-title
        .card-body

Should I use some prefix to .card block?

Solution

  • You don't need any prefixes for card block but I'd rather go with something like this:

    .control
  .control__panel
    .control__results
      .card
        .card__title
        .card__body

    So there's two blocks: control with card inside of it. control has two elements: panel and results. And card has title and body.

    If you want to connect card with control you may add a mix with control__card so the final markup will be:

    .control
  .control__panel
    .control__results
      .card .control__card
        .card__title
        .card__body

    For more info about such approach please see https://en.bem.info/methodology/css/#mixes