Let's Take a Look at CSS in JS with React in 2019 - React-JSS

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!

Let's Take a Look at CSS in JS with React in 2019 - CSS & Inline Styling

Phil Tietjen ・ Sep 9 '19 ・ 5 min read

#webdev #react #css #tutorial

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

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

// 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

React-JSS combining with React

// 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>
  )
}

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

// 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

// 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!

// 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.

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

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

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 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?

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 if you want to follow me or chat on there. I sometimes post things there!

Comments

[gjcampbell]

I didn't see styled-components mentioned. What do you think about it? I'd take it over jss. Nothing wrong with jss, but SC is just outstanding.

[Phil Tietjen]

Hey gj (Sorry I'm going off your username :) ), each entry in this series I'm doing is focusing on one package or solution at a time so that's why I didn't mention styled-components.

I'm going to try my very hardest not to spoil my thoughts on any of these until I get to writing a full piece on them.

Will I write about styled-components next? Will I like the styled API? Will I be able to finish this series before 2019 ends? Will I back out because I'm a coward?

Stay tuned for my next entry! :D

[gjcampbell]

Your posts are good. Keep going. 👍

[Sung M. Kim]

Does JSS use SCSS style syntax?
I see some SASS-style nesting and & to refer to the current element but unable to find a documentation on it.

[Phil Tietjen]

Hey Sung,

Thanks for commenting!

You may have to go digging through the JSS plugin doc pages to see exactly what kind of syntax is offered.
I believe all the official plugins are included in the default preset so React-JSS should have access to that functionality.

In there are some SCSS nested like syntax and more! Was there specific functionality you were looking for?

[Sung M. Kim]

Thank you for the follow-up, Phil.

I am not looking for a specific functionality, but was interested in whether I could convert existing SCSS styles directly to JSS with ease.

And forgot to mention, nice visuals with Tengen Toppa Gurren Lagann. (want to watch it again 🙂).

[Richard Lenkovits]

Hi! Tengen Toppa Gurren Lagann fan here, love the GIFs :D
By the way, usually my problem is that I don't know how to use more advanced CSS selectors inline in js.

[Phil Tietjen]

Hey Richard, the secret to the series is that the gifs are the real take aways! :D

Glad you liked it, the JSS docs have some great direction on how to achieve more advanced CSS like features. I believe that stuff is specifically included in some of their plugins.

But it's exactly stuff like that why I'm not the biggest fan of styles in JS objects is figuring out or finding the things you know in slightly different syntax! :(

[Mark Kop]

Great article and nice gifs!

[Phil Tietjen]

Glad you liked the read Mark! :D

I had fun forcing these gifs in here.