Skip to content

andrewevans0102/css-scope

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

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.

Chrome Flag

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.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published