CSS Scope
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.
Project Examples
The project includes 2 different examples of using @scope
.
In the 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/no_scope.html
and http://localhost:8080/with_scope.html
to see it running locally. Example picture is of my Dog Harvey.
In the 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.