Let's Take a Look at CSS in JS with React in 2019 - React-JSS
Tags: react, css, webdev, tutorial
Published: 2019-09-16 21:27:25


Hey! I'm back with the 2nd installment of my series where I decide to talk about CSS in js solutions for styling React applications.

If this is your entry into the series please feel free to check out my first entry! I start from the basics and talk about plain CSS with React, provide a resource on the general pitfalls of CSS, and personal pitfalls I encountered with React. I also go on to cover React's inline styling and how it solves some of those issues, but unfortunately does not completely take the W.

On the bright side, it's full of matrix references, so you should at least check it out for that!

{% link https://dev.to/phizzard/let-s-take-a-look-at-css-in-js-with-react-in-2019-css-inline-styling-jcg %}


## What is JSS?

I'll try to keep things fairly brief so we can jump into the implementations with React, so let's use the handy dandy JSS documentation to tell us what we need to know!
> _JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node._


Well jee Wizz Philly boy, that sure sounds pretty similar to inline styles with React that you showed last time. Actually, because the implementation is similar is why I decided to make JSS my second entry since we're already familiar with writing styles in Javascript! We get the reap those same benefits and some extra since things under the hood work a little differently.

> _JSS is framework agnostic. It consists of multiple packages: the core, plugins, framework integrations and others._

**To Summarize**
*Core* - The thing that lets us use Javascript to describe our styles.

*Plugins* - The things that can be added onto Core to add functionality to how we describe our styles.

*Framework Integrations* - The thing that lets us easily use JSS with a specific framework **BINGO!**

## This is Where React-JSS Comes In
![A tiny mecha called Lagann standing](https://thepracticaldev.s3.amazonaws.com/i/n53shw66o63kpvhudhxl.jpg)
> Let's pretend that this little guy here is React-JSS. for me?

React-JSS is a framework integration for being able to use JSS in our React applications. It's a separate package so we don't need to install JSS core, we just need the React-JSS package. It also may come with JSS plugins and configurations setup. To kick start this off, let's compare inline styling to React-JSS with our trusty Button component from last time.

**Inline Styling**
```jsx
// Button.js
import React from 'react'

const Button = () => {
  const buttonGreen = {
    backgroundColor: "green",
    border: "2px solid white",
    borderRadius: "2rem"
  };

  return(
    <button style={buttonGreen}>
      I think I'm green
    </button>
  )
}
```

**React-JSS**

![Gif: Lagann forcibly combining with another mecha and not working](https://thepracticaldev.s3.amazonaws.com/i/k4f8se50b3psm8novy8k.gif)
> React-JSS combining with React

```jsx
// Button.js
import React from 'react'
import {createUseStyles} from 'react-jss'

const useStyles = createUseStyles({
  buttonGreen: {
    backgroundColor: "green",
    border: "2px solid white",
    borderRadius: "2rem"
  }
})

const Button = () => {
  const {buttonGreen} = useStyles()
  
  return(
    <button className={buttonGreen}>
      I think I'm green
    </button>
  )
}
```
![Gif: Lagann combining with another mecha successfully](https://thepracticaldev.s3.amazonaws.com/i/ce7wqm1c1qn3tllx2nzk.gif)
> Sorry, maybe it's more like this.

**How did the implementation change?**
- We imported `createUseStyles` function from the React-JSS package.
- We created a `useStyles` hook by invoking `createUseStyles`.
- We described our CSS styling under an object property of `buttonGreen` in `createUseStyles`'s argument
- We destructed `buttonGreen` from the returned value from the `useStyles` hook.
- We passed in `buttonGreen` into the `className` attribute instead of `style`

Let's also take a look at comparing our trusty Button component from last time with props affecting our styles.

**Using Props with Inline Styling**
```jsx
// Button.js
import React from 'react'

const Button = ({backgroundColour, children}) => {
  const buttonStyles = {
    backgroundColor: backgroundColour,
    border: "2px solid white",
    borderRadius: "2rem"
  };

  return(
    <button style={buttonStyles}>
      {children}
    </button>
  )
}
```

**Using Props with React-JSS**
```jsx
// Button.js
import React from 'react'
import {createUseStyles} from 'react-jss'

const useStyles = createUseStyles({
    buttonStyles: {
      backgroundColor: backgroundColour => backgroundColour,
      border: "2px solid white",
      borderRadius: "2rem"
    }
})

const Button = ({backgroundColour, children}) => {
  const {buttonStyles} = useStyles(backgroundColour)

  return(
    <button className={buttonStyles}>
      {children}
    </button>
  )
}
```
**BONUS: This usage works for both implementations!**
```jsx
// SomePage.js
import React from 'react';
import Button from 'Button';

const SomePage = () => (
  <Button backgroundColour="blue">I'm going to be blue</Button>
)
```

**How did the implementation change?**
- We passed our `backgroundColour` prop into our `useStyles` as an argument
- In our `createUseStyles` we have access to `backgroundColour` as a function value, and assign it accordingly.

![Gif: Gurren Lagann standing dramatically against the sun](https://thepracticaldev.s3.amazonaws.com/i/umdvsaimk0tpmahg7c3i.gif)
> React-JSS in React looks pretty cool huh?

## What do we benefit in the change from Inline to React-JSS?
**From just JSS**
- JSS generates CSS, not inline styles.
- JSS generates hashed classNames to avoid collisions in selectors.
- JSS boasts efficient CSS updates for use controlled animations.

_For the full list of benefits Here's the [features list from the JSS documentation](https://cssinjs.org/features?v=v10.0.0-alpha.24)_

**From React-JSS**
- It allows us to use theming based on React's context API.
- Only CSS from rendered components get extracted.
- Generated stylesheets are created and removed based on mounted and unmounted components.

_For the full list of benefits, Here's the [React-JSS documentation](https://cssinjs.org/react-jss/?v=v10.0.0-alpha.24#accessing-the-theme-inside-the-styled-component)_

## What Do I Personally Like about React-JSS?
#### Simple
React-JSS doesn't stray too far from how inline styling is implemented making this very easy to transition to. Whether you're just learning it for the first time or transitioning an application from inline to React-JSS.

#### Hooks
This could really tie into the simple point, however, I'm blind follower of React's hook API since it came out. This is also a perfect time to come clean and admit that I have tried React-JSS way back and did **not** like it. Back then you had to use a [Higher Order Component](https://reactjs.org/docs/higher-order-components.html) to inject your style variables into your component and it was just too much for me compared to what else was out there. The newer API with `createUseStyles` however, is almost a turn around for me; it makes it way easier to understand what is going on and easier to type.

#### No Inline Styles in Our Html
Yay! remember that downside I had with Inline Styling? Well, it's gone here with pretty much minimal effort here.

## What Do I Personally Not Like about React-JSS?

![Gif: Unknown Mecha punching Gurren mecha off screen](https://thepracticaldev.s3.amazonaws.com/i/fu4bhxot0ichauulwvg5.gif)

#### Object Styles
I still don't like describing my styles in Javascript objects. Call me petty but I just don't like missing out on the syntax highlighting and having to think 3% more about what I'm writing because my brain has to transpile CSS to Javascript. It's also still tedious to take any raw CSS and convert it over.

#### Assigning Styles to className
While this does make it easy to transition to going from `style={styles}` to `className={styles}`, I'm not in love with how this looks in a component file. It makes sense considering JSS is making CSS stylesheets in the background and the component needs to reference the hashed class. I just wish there was a more aesthetically pleasing form of this.
> Was that too much foreshadowing for the next entry?

## Would I use React-JSS?
It would be in my arsenal of choices and packages to check in on time to time. It's a simple solution to styling your react apps that boasts enough performance that's easy to use. If you're working with an application that uses inline styling or you're only familiar with inline styling, I would heavily recommend using React-JSS.

Hope to see you in the next one! Let's see if I can "finish" the series before 2019 ends; whatever finishing it means!

Hey! I'm on [Twitter](https://twitter.com/Phizzard) if you want to follow me or chat on there. I sometimes post things there!