Using BEM with SCSS/SASS

Design
1

I recently finished the Bourbon Fundamentals and I noticed that elements of a block are not nested inside the main block.

In the examples I see:

.list {
  // some css here
}

.list__item {
  // more css here
}

Is this done to keep the nesting to a minimum?

I know with the recent versions of SASS you can do this instead:

.list {
  // some styles here
  &__item {
    // element styles here
  }
}

And it would result in the styles from above. I assume the first option I noted is probably better for modularity and to prevent from deep nesting elements?

1 Like