How to style your front-end by using JSS

Author Damir Drempetić
Category Development
Date May 10, 2021
2 min read

Choosing between numerous options for styling your app could be a project in and of itself.

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

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 favourite regarding 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 styles just as 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 flavour 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 flavour, 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 you thoughts? Which styling solution do you prefer? How do you deal with theming and reusable styles?

_____
We’re available for partnerships and open for new projects.
If you have an idea you’d like to discuss, share it with our team!

Subscribe to our newsletter

Subscribe now and get our top news once a month.

100% development, design & strategy.

100% spam-free.

    You're now a part of our club!

    We got your e-mail address and you'll get our next newsletter!