SCSS Code Style

ScandiPWA follows a strict SCSS style guide for maintainability and consistency

ScandiPWA follows the BEM methodology to write styles. In addition, there are some guidelines to help you write more maintainable stylesheets.

We strongly recommend you use Stylelint to check your code style. This article was written to help you understand the code style rules we enforce and write better code.

Avoid Non-BEM Selectors

Minimize Nesting

In some cases, you might need to style one Block differently depending on whether it is a child of another block.

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.

Prefer Mobile-First Styling

Mobile-first styling means that you are encouraged to start with mobile styles. When mobile styles are complete, you can use the @include desktop directive and other breakpoints to adjust the styling for larger viewports.

Avoid Magic Numbers

You should avoid hard-coding numbers when their reasoning is not obvious. Make values re-usable and understandable by using CSS variables.

Use Round Numbers

Unless you need to produce a pixel-perfect design, we recommend using values rounded to the nearest 5px, avoid unnecessary decimal digits, and consider how much precision browsers can actually display.

Last updated

Was this helpful?