How CSS @scope can replace BEM
- Introduction to CSS @scope and its potential as a replacement for BEM in frontend projects.
- Explanation of BEM (Block Element Modifier) and its purpose in grouping styles within an HTML view.
- Discussion about the challenges of managing large CSS or SASS files in a project using BEM.
- Introduction to CSS @scope and its experimental status in browsers.
- Example HTML code demonstrating the use of CSS @scope to style elements within a specific area.
- Example of using CSS @scope to create a "donut" scope, where styles are defined for a set of elements and its children.
- Explanation of how to enable the experimental web features flag to use CSS @scope in Chrome.
- Comparison between the BEM method and refactoring the same code using CSS @scope.
- Presentation of a sample project on GitHub showcasing the refactoring of BEM styles into CSS @scope.
- Demonstration of how to refactor BEM styles into CSS @scope, including finding style groups and adding scoped styles.
- Comparison of the original BEM styles and the refactored CSS @scope styles, highlighting the benefits of the latter in terms of conciseness and readability.
- Discussion of additional benefits of CSS @scope, such as better control of the CSS cascade and reduction of side effects.
- Mention of two HTML files in the sample project that showcase the impact of the CSS cascade and how CSS @scope can help mitigate its effects.