This is a companion project to my upcoming LogRocket post on using
@scope to refactor Block Element Modifier (BEM) projects in Chrome.
The Chrome 118 release includes the
@scope feature which could make styling easier for Frontend developers.
As of 10/02/2023 the
@scope feature is still in experimental status. To turn on the
@scope feature in Chrome, open chrome and then go to
chrome://flags/ in a new tab. Find the
Experimental Web Platform features flag and click "enable". Relaunch Chrome and it should be working.
The project includes 2 different examples of using
html-css folder, an example was modified from one originally seen in the Bram.us post A Quick Introduction to CSS Scope. To run this project, one can either open the invidual HTML files in Chrome or using
http-server by (1) running
npm install on the root project and then (2) run
npm run start-html. Go to
http://localhost:8080/with_scope.html to see it running locally. Example picture is of my Dog Harvey.
react-exaple folder, there is an example of a react project that has a BEM component that is also refactored into a
@scope component. To run that from the project root, run
npm run start-react and you can view it on
localhost:3000. The BEM vs.
@scope components are all named approriately so the BEM versions have
WithBEM and the
@scope versions have
WithScope in them.