🦄 How to scope your CSS/SCSS in React JS ⚡️
Tags: react, showdev, javascript, css
Published: 2020-07-01 13:41:50

Hi guys ! 🤗

Next article about React JS! Last week we talked about [How to build a complete Modal Component with React Hooks](https://dev.to/viclafouch/build-a-complete-modal-component-with-react-hooks-2fk8).

This week, let's discover a little trick that will allow you to scope your __css__/__scss__/__sass__ in your React JS application.

In order to solve the problem of css encapsulation, there are two main approaches, **css-modules** and **CSS-in-JS**. 
However, both of them have a very very big problem. The developer experience is not good, by which I mean you often have to write more code than you expect to achieve a simple style.

![React SCSS Scoped](https://dev-to-uploads.s3.amazonaws.com/i/e83gy26d2gjte3bln198.png)
<figcaption>Created with meme-studio.io</figcaption>

With `react-scoped-css` created by [@gaoxiaoliangz](https://github.com/gaoxiaoliangz), you can just write the normal css you know, while having the advantage of css encapsulation!

# React Scoped CSS

## How does it work ?

Usually, you import your __global style__ file in your React application, __or__ you use a __css file by component__ if like me you like to be rigorous. But the problem with this second approach is that your style is not scoped.

The scoped CSS allows you to targets a specific element and its children without any impact on other component.

## Installation:

### **With create-react-app**

Since create-react-app doesn't allow you to change webpack and babel config. So in this scenario, you have to use [craco](https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation) to override webpack config. Luckily you don't have to do it manually, just use a simple craco plugin.

Setup craco following [this guide](https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation)

```
# npm i craco-plugin-scoped-css --dev
```

Then, create a `craco.config.js` in your project root and add this code: 

```javascript
module.exports = {
  plugins: [
    {
      plugin: require('craco-plugin-scoped-css')
    }
  ]
}
```

### **Without create-react-app**

You have to add [one babel plugin](https://www.npmjs.com/package/babel-plugin-react-scoped-css) and one webpack loader.

```
# npm i babel-plugin-react-scoped-css --dev
```

And in your babel config:

```javascript
plugins: ["babel-plugin-react-scoped-css"]
```

## Usage:

Just __create your component__ and __import your stylesheet__. The css filename must be like `[name].scoped.css` (or .scss/.sass). But you can define your own matching rule (`.scoped.css`, `.local.scss`, ...) in the plugin configuration.

![React CSS Scoped JSX](https://dev-to-uploads.s3.amazonaws.com/i/kdtno60b3ev19ql5bcaq.png)

Your css (or scss/sass):

![React CSS Scoped CSS](https://dev-to-uploads.s3.amazonaws.com/i/xa1mepb6a2odnmhucyge.png)

## Result 

![React CSS Scoped HTML](https://dev-to-uploads.s3.amazonaws.com/i/eioixlqg526papulrxva.png)

As you can see in the html above, component with scoped css file imported has a unique `data-v-<hash>` attribute.

![React CSS Scoped CSS](https://dev-to-uploads.s3.amazonaws.com/i/y3d7llk90ocyfz6ajev1.png)

The css selector also has a corresponding hash like `selector[data-v-<hash>]`. So all the styles in `home.scoped.css` are scoped to `Home.jsx`.

# Architecture

One common way to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route. So here, __let's group our JS and scoped css__ in a folder for one component!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k3sr0dnuvkhre19rbaqh.png)
<figcaption>Example of one of my projects</figcaption>

Voilaaa

You can find the Github Repo here: [https://github.com/gaoxiaoliangz/react-scoped-css](https://github.com/gaoxiaoliangz/react-scoped-css)

Today, I use it on most of my projects and I encourage you to try it!

Cheers 🍻 🍻 🍻 

{% link https://dev.to/viclafouch/build-a-complete-modal-component-with-react-hooks-2fk8 %}

{% link https://dev.to/viclafouch/5-useful-and-modern-custom-hooks-for-your-react-app-3dl %}