BEM and CSS Nesting

[josch87]

On the homepage of BEM there is currently the following CSS example:

.opinions_box {
    margin: 0 0 8px 0;
    text-align: center;

    &__view-more {
        text-decoration: underline;
    }

    &__text-input {
        border: 1px solid #ccc;
    }

    &--is-inactive {
        color: gray;
    }
}

How/where can I use this example? Can the classes only be concatenated with a CSS pre processor (".opinions_box" + "__view-more" = ".opinions_box__view-more")?

I expected it to work with CSS Nesting as well (also see Chrome Developers) but this is not working.

Thank you very much for your help.

[medienbaecker]

It is indeed not possible with native CSS nesting. See https://www.w3.org/TR/css-nesting-1/#conditionals:~:text=Some%20CSS%2Dgenerating%20tools%20that%20preprocess%20nesting%20will%20concatenate%20selectors%20as%20strings%2C.

So as far as I know you'll have to use a CSS preprocessor like Sass for BEM.