CODEWITHSUNDEEP
cssbem
TotalAMD
TotalAMD

Reputation: 1016

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?

Upvotes: 0

Views: 808

Answers (1)

tadatuta
tadatuta

Reputation: 2025

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

Upvotes: 2

Related Questions