ScandiPWA uses the Block-Element-Modifier (BEM) methodology for styling because it offers several advantages:
- Consistency: By following the BEM guidelines, the codebase remains consistent. This makes it easier for developers to understand and navigate the codebase.
- Maintainability and Reusability: BEM promotes the creation of standalone blocks that can be easily moved to different parts of a layout without affecting the overall design. This makes the styles maintainable and reusable.
- Avoiding Name Clashes: BEM methodology helps in building complex and flexible components while ensuring that class names do not clash.
- Ease of Overriding Styles: With BEM, styles can be easily overridden in child themes, providing flexibility for customization and future design updates.
- Mixes: BEM allows for “mixing” multiple classes together, which means that other components can add additional style rules to a component. This is particularly useful when a component needs to define some styles but can’t predict ahead of time the exact styling features that will be needed for that component in parent components.
In summary, BEM provides a structured approach to organizing CSS in a way that makes the code easier to maintain and understand, reduces the likelihood of name clashes, and allows for greater flexibility in styling components.
How to use BEM?