How CSS @scope can replace BEM

Frontend engineers often face challenges with CSS naming conventions, traditionally relying on the Block Element Modifier (BEM) method for organizing styles. The introduction of the @scope feature in Chrome aims to enhance this by enabling block-level scoping of styles within stylesheets, offering improved control over the CSS cascade and simplifying style management. This feature, expected with Chrome 118, allows for more concise style definitions compared to BEM, as seen in refactoring examples using React, which highlight cleaner and more manageable code. While @scope has the potential to streamline front-end styling significantly, it requires enabling experimental web features in Chrome, as full browser support is still pending. The feature not only reduces the complexity of CSS files but also mitigates the unintended side effects of the CSS cascade, potentially transforming the way developers approach styling in large projects.

No tracked trend matches for this post yet.

Use this post, company, and trend context to find content marketing opportunities, perform competitive analysis, or address product feature gaps via the Plushcap MCP server or the Plushcap API.