Guide
How to nest BEM CSS in SCSS without losing clarity
A practical way to turn BEM selectors into readable SCSS while keeping selectors easy to search.
BEM and SCSS work well together when nesting mirrors the name of the component rather than the layout around it. Start with the block, then use &__ for elements and &-- for modifiers. For example, .notice__title becomes &__title inside .notice, and .notice--compact becomes &--compact.
Keep nesting shallow. A selector such as .notice .icon can be nested as .notice { .icon { ... } }, but several levels of descendants make the final selector hard to predict. If a child is a reusable component, it is often clearer to give it its own block instead of nesting it deeply.
Pseudo-classes and pseudo-elements can follow the same pattern. Put &:hover or &::before beside the rule they modify, then compile and inspect the resulting selector. This preserves the familiar BEM class name in the output and makes browser inspection straightforward.
Use the CSS to SCSS Converter to create a first draft from existing BEM CSS, then review the compiled selectors before committing. The tool focuses on straightforward nesting and preserves source order by default, so it is a starting point for review rather than a replacement for it.