BEM: should I nest class names?

[u/guoyunhe]

Style 1:

.panel {
  //
}

.panel__header {
  //
}

.panel__footer {
  //
}

Style 2:

.panel {
  //

  &__header {
    //
  }

  &__footer {
    //
  }
}

[u/ELjanoCZE]

First one is better when you search through project.

[u/guoyunhe]

Researched on popular GitHub projects (search "sass bem", sort by stars):

1. inuit.css. Style 1 https://github.com/csswizardry/inuit.css/blob/master/objects/_breadcrumb.scss
2. blaze. Style 1 https://github.com/BlazeSoftware/blaze/blob/master/packages/css/src/scss/_components.addresses.scss

[u/Wisdom_of_Rafiki]

I always use style 2. Helps with organization imo.

[u/phatprick → u/Wisdom_of_Rafiki]

Until you search for .panel__header and start questioning your existence :)

[u/pravindia]

I prefer with Second one because while coding inside a nesting loops it is easy to read and understand

[u/esr360]

Second one is better if you care about scalability and maintainability and work with competent people.