ScandiPWA
Create Magento AppCreate ScandiPWA AppUser ManualGitHub
  • Why Scandi
  • πŸš€Quick-start Guide
  • πŸ—ΊοΈRoadmap
  • Introduction to the Stack
    • CMA, CSA, and ScandiPWA
    • Challenges
  • Setting up Scandi
    • Storefront Mode Setup
      • Proxying requests to server
    • Magento Mode Setup
    • Existing Magento 2 setup
    • Magento Commerce Cloud setup
    • Updating to new releases
      • Storefront mode upgrade
      • Magento mode upgrade
      • CMA upgrade
      • CSA upgrade
      • Custom ScandiPWA composer dependency update
      • Local ScandiPWA Composer Package Setup
    • Docker Setup [deprecated]
      • Legacy Docker setup
      • Migrating to CMA & CSA
  • Developing with Scandi
    • Override Mechanism
      • Overriding JavaScript
        • Overriding classes
        • Overriding non-classes
      • Overriding Styles
      • Overriding the HTML / PHP
      • Parent Themes
    • Extensions
      • Creating an extension
      • Installing an extension
      • Migrating from 3.x to 4.x
      • Publishing an extension
      • Extension Terminology
    • Working With Magento
      • Magento troubleshooting
      • Working with Magento modules
      • Working with GraphQL
      • GraphQL Security
      • Working with "granular cache"
    • Developer Tools
      • Debugging in VSCode
      • ScandiPWA CLI
      • Configuring ESLint
      • CSA Commands
    • Deploying Your App
      • Build & Deploy Android app
      • Build & Deploy iOS app
  • Structure
    • Directory Structure
    • Building Blocks
      • Components
        • Styling Components
      • Routes
      • Redux Stores
      • GraphQL Queries
      • Global Styles
      • The Util Directory
      • Type Checking
    • Application assets
    • Code Style
      • JavaScript Code Style
      • SCSS Code Style
  • Tutorials
    • Customizing Your Theme
      • Styling
        • Customizing the Global Styles
        • Adding a New Font
        • Overriding a Components Styles
        • Extending a Component's Styles
      • Customizing JavaScript
        • Customizing the Footer Copyright
        • Adding a New Page
        • Adding a Section in My Account
        • Adding a Tab on the Product Page
        • Creating a New Redux Store
    • Payment Method Integration
      • Setting Up for Development
      • Redirecting to the Payment Provider
      • Handling the Customer's Return
    • Creating a Custom Widget
      • Scandi CMS System Overview
      • Creating a Magento Widget
      • Implementing the Rendering
    • Video Tutorials
      • #1 Setting up and talking theory
      • #2 Templating in React
      • #3 Overriding a file
      • #4 Styling the application
      • #5 Patterns of ScandiPWA
    • Dark Mode Extension
    • Deploying Native Apps
    • Product 3D Model Extension
      • Part 1: Magento 3D Model Uploads
      • Part 2: GraphQL API
      • Part 3: Scandi Frontend
    • Social Share, Full Extension Development
      • STEP-1 and 2 Creating Magento 2 Module
      • STEP-3 Backend Configurations Settings
      • STEP-4 Simple GraphQl and Resolver
      • STEP-5 Creating Extension, Base Redux Store
      • STEP-6 Extension plugins
      • STEP-7 GraphQL types, Helpers
      • STEP-8 Query Field and FieldList
      • STEP-9 render Plugins and MSTP Plugin, Component creation
      • STEP-10 SocialShare Component Development
      • STEP-11 SocialShare for CategoryPage
      • TASK-1 Changing LinkedIn to Twitter
      • STEP-12 Comments for Admin Users
      • STEP-13 Final, bugfixes
    • Accessing Magento 2 Controllers
      • STEP-1 Creating Magento 2 Module
      • STEP-2 - Create Magento 2 Frontend Route and Basic Controller
      • STEP-3 Accessing Magento 2 Controller, Bypassing ScandiPWA frontend
      • STEP-4 Creating ScandiPWA Extension with additional dependencies
      • STEP-5 Creating Plugin and Axios request
  • About
    • Support
    • Release notes
    • Technical Information
    • Data Analytics
    • Contributing
      • Installation from Fork
      • Repository structure
      • Code contribution process
      • Submitting an Issue
      • Publishing ScandiPWA
Powered by GitBook
On this page
  • Avoid Non-BEM Selectors
  • Minimize Nesting
  • Prefer Mobile-First Styling
  • Avoid Magic Numbers
  • Use Round Numbers

Was this helpful?

  1. Structure
  2. Code Style

SCSS Code Style

ScandiPWA follows a strict SCSS style guide for maintainability and consistency

PreviousJavaScript Code StyleNextCustomizing Your Theme

Last updated 4 years ago

Was this helpful?

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

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 : Having an additional selector element will increase the specificity and make the styles harder to .

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; 
    }
}

Minimize Nesting

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

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.

Prefer Mobile-First Styling

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.

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.

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.

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 to adjust the styling for larger viewports.

specificity
breakpoints
override in .override.style.scss files