Example BEM

example.jsx

// Example Card Component
// Optional prop applies the Red modifier
// Block: Card
// Elements: Card__Title
//         : Card__Body
// Modifier: Card--red
function Card(props) {
    return (
        <div className={`Card ${props.exampleRedModifier? 'Card--red' : ''}`}>
            <h1 className="Card__Title>Example</h1>
           <div className="Card__Body">
               {props.children}                    
           </div>
        </div>
    );
}

// Block: Aside
//      Optional prop applys the --left modifier
// Elements: Aside__Card
//         : Aside__Meta
//         : Aside__List
//      All styleing applied to the elements are specific to their use within an Aside
// Modifiers: Aside--left
//      Positions the Aside on the left
                          
function Aside(props) {
    return(
        <div className={`Aside ${props.left ? 'Aside--left' : ''}`}>
            <!--Other logic-->
            <Card className="Aside__Card" exampleRedModifier={true}>
                <Meta className="Aside__Meta" avatar={<Avatar src={...}} />
            </Card>
        </div>
    ); 
}

style.scss

// Style Card as its own block, independent of being in an Aside
.Card {
    border: 1px solid black;
    padding: 10px;
    
    &--red {
        background: red;
    
        &__Title {
            color: white
        }
    }
    
    &__Title {
        font-size: 24px;
    }
    
    &__Body {
        padding: 12px;
    }
}


.Aside {
    //   Style the Aside
    ...
    
    //   Apply the optional modifier
    &--left {
        float: left;
    }
    
    // Style Elements
    &__Card {
        position: absolute;
        left: 0;
    }
    
    &__Meta {
        // MEta styles within an Aside
    }