How to style your front-end by using JSS

I’ve tried several styling solutions and approaches on front-end like:

• Vanilla CSS
• CSS extensions like Sass or Less
• CSS modules (and Sass)

Projects in which I used them were written either with Vanilla JS or with some modern JavaScript frameworks like AngularJS, Angular 4, React or even React Native.

These are great, but I have a huge favorite regarding the styling options world which is not mentioned above. And I would vote for it on a new project anytime.

To finally get closer to the point, I like to write my style just as the rest of the app. In JavaScript. Which means I use the same programming language and the same syntax for both logic and for styles. This is really cool, but it’s not the main motive behind it. It’s because I find JavaScript much more powerful and capable than CSS.

JavaScript brings more of that engineering flavor into the app styling process. And it’s possible with CSS-in-JS solutions, or shorter JSS.

I used JSS for the first time while I was working on projects built with Material UI. In their docs, you can find out why they use such an approach after abandoning Less and custom solution inline styles. Actually, they did some pretty interesting comparisons when choosing a styling solution.

I’ve mentioned an engineering flavor, so let me show you some examples of what I thought.

Variables

You can simply keep any style in a variable.

const COLOR_PRIMARY = "black";
const COLOR_SECONDARY = "#f0f0f0";

Also, you can group them into a JS object.

baseTitle: {
    fontSize: 24,
    fontWeight: 600,
    color: COLOR_PRIMARY
}

You could think now – nothing special, I can do that with extended CSS too. Be patient…

Spreading, default properties and overriding

Let’s say we want to extend this basic title for some other use.

sectionTitle:  {
  ...baseTitle,
  //override font weight from base title
  fontWeight: 800, 
  //extend base title
  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
  fontStyle: 'italic',
}

Notice that you don’t need to learn any new syntax. You actually write CSS, but you just use camelCase instead of the kebab-case: font-size -> fontSize. And have JS power on top of it.

Themes

Then, you could also keep all your reusable styles in one place and build your whole theme – which is simply a JS object.

const theme = {
  backgroundColor: COLOR_PRIMARY,
  color: COLOR_SECONDARY,
  ...
};

That theme could be considered a config file, but for styles. Use Material UI theme for inspiration – from breakpoints and typography to colour palette and spacings.

Integrate JSS with React

There is a JSS Core library which can be used in any JavaScript app, but React developers will be more interested in React-JSS.

Dynamic Values

Give attention to Dynamic values.

JSS uses the Hooks API – where you can use hooks like createUseStyles.

There is a cool example I will borrow from JSS docs about how to start with it. I will just separate a style from components, because it is always a good practice not to make a big clutter in one file. Also, it reminds of the CSS modules approach which have a separate isolated style for each component.

import {createUseStyles} from 'react-jss'

const useStyles = createUseStyles({
  myButton: {
    padding: props => props.spacing
  },
  myLabel: props => ({
    display: 'block',
    color: props.labelColor,
    fontWeight: props.fontWeight,
    fontStyle: props.fontStyle
  })
})

Notice how elegantly you can change the style depending on props values passed from the component.

import React from 'react'

const Button = ({children, ...props}) => {
  const classes = useStyles(props)
  return (
    <button className={classes.myButton}>
      <span className={classes.myLabel}>{children}</span>
    </button>
  )
}

Button.defaultProps = {
  spacing: 10,
  fontWeight: 'bold',
  labelColor: 'red'
}

const App = () => <Button fontStyle="italic">Submit</Button>

Theming

Besides using hook for creating styles, there is the useTheme combined with a ThemeProvider wrapper. It also provides a theming solution which makes it a lot easier to start writing themed apps with reusable styles, and to quick-start your new project.

Would you give it a try?

What are your thoughts? Which styling solution do you prefer? How do you deal with theming and reusable styles?