Avoid using selectors that aren't Block-Element-Modifier classes:

component/CheckoutOrderSummary/CheckoutOrderSummary.style.scss (fragment)
.CheckoutOrderSummary {
    &-CartItemDescription {
        margin-top: 5px;
​
        p {
            font-size: 1.1rem;
            line-height: 1.5;
        }
    }
}

Potential issues:

• As code becomes more complex, it can become unclear what role the p plays in the app. A well-named BEM class would describe its purpose better

• Unnecessary coupling: JavaScript code is now forced to use a <p> element. If you want to rewrite the component to use a <div> instead, you would have to update the styles.

• Unnecessary specificity: Having an additional selector element will increase the specificity and make the styles harder to override in .override.style.scss files.

Instead, it is recommended to assign a new BEM class to the element you want to style. Then, you can select it properly:

.CheckoutOrderSummary {
    &-CartItemDescription {
        margin-top: 5px;
    }
    
    &-CartItemDescriptionContent {
        font-size: 1.1rem;
        line-height: 1.5; 
    }
}

Avoid nesting selectors - don't select a block nested inside another block:

.Button {
    margin: 5px;
}
​
// this is discouraged
.ContactForm .Button {
    margin: 10px;
}

This is discouraged for several reasons:

• Button styles now contain selectors from another component. This causes coupling, which will result in issues if the .ContactForm block is renamed

• The selector has higher specificity, making it harder to override.

Instead, consider using a variable to customize your styling:

Button.style.scss
:root {
    --button-margin: 5px;
}
​
.Button {
    // by default, a value of 5px will be inherited from :root
    margin: var(--button-margin);
}

ContactForm.style.scss
.ContactForm {
    // we can set the variable lower in the hierarchy to override it
    --button-margin: 10px;
}

Now, each component is responsible for its own styles only, and the specificity is still low.

In this case, another possible solution would be to use a Modifier:

.Button {
    margin: 5px;
    
    &_margin_large {
        margin: 10px;
    }
}

Now, the button could take a prop to specify the margin size and add it as a modifier to the Button Block. Then, the ContactForm would have to pass a value to this prop indicating that the button should have a larger margin.

Avoid hard-coded values:

.NotificationList {
    position: fixed;
    top: 110px;
}

Issues:

• Unclear where the value 110 is coming from

• The layout can break if some values are changed

Instead, use variables, and combine them with calc if necessary:

.NotificationList {
    position: fixed;
    top: calc(var(--header-height) + var(--breadcrumbs-height) + 20px);
}

Advantages:

• Intentions are more clear

• Variable values can be safely changed to adjust the layout

• Each value is re-usable.