Focus on component-based architecture using Stitches, a server-rendered CSS-in-JS library that provides built-in support for variants.

Styling components using CSS-in-JS was first introduced in 2014 and continues to gain popularity. The developer community’s widespread adoption of the pattern has helped library makers determine what concepts are important to a CSS-in-JS library.

For example, Stitches is a CSS-in-JS library that takes the most recent component styling trends, such as creating variants for component reuse and server-side rendering, as its core features. It’s a fully-typed CSS-in-JS library with a focus on component-based architecture and developer experience.

Stitches, like other CSS-in-JS libraries, has the usual benefits of critical CSS injection and automatic vendor prefixing. But compared to other CSS-in-JS libraries, Stitches stands out because of the following perks:

Performance

Stitches avoids unnecessary prop interpolations at runtime, making it significantly more performant than other styling libraries

Server-side rendering

Stitches supports cross-browser server-side rendering, even for responsive styles and variants

Variants

Variants have first-class support, enabling you to design composable component APIs

Theming

Define multiple themes with CSS variables, then use them in your component by defining the class name

Specificity

Due to its atomic output, specificity issues are a thing of the past

Developer experience

It has a very helpful config file with token-aware properties, breakpoints helper, and custom utils. Stitches provides a fun and intuitive DX

While Stitches is designed to be framework-agnostic, at the time of writing, it only supports React and has support to Vue in progress.

Getting started with Stitches

To start using Stitches with React, you need to install the library with your package manager:

## With npm
npm install @stitches/react

## With yarn
yarn add @stitches/react

Then, you need to create a configuration file and define the configuration for your design system. Create a stitches.config.ts file (or .js if you don’t use TypeScript) and import the createStyled function from the library.

The createStyled function works like a React hook function. It receives a configuration object with the following optional properties:

• prefix: use a prefix for all your classnames to avoid clashes
• tokens: special variables that you can define and apply as CSS values
• breakpoints: create responsive breakpoints to aid you in writing responsive styles
• utils: create custom functions that acts as a shorthand for writing your CSS properties

And return two functions for your styling needs:

• styled: a function to create React components with styles
• css: a function to create themes and SSR styles

// stitches.config.ts
import { createStyled } from '@stitches/react';export const { styled, css } = createStyled({
prefix: '',
tokens: {},
breakpoints: {},
utils: {},
});

We’ll review configuration properties later. For now, let’s focus on implementing Stitches and rendering a styled component.

The stitches.config file needs to be imported into your components, so if you’re using Create-React-App, don’t forget to put it inside the src/ directory.

Let’s create a styled button component to test out Stitches. Create a new component file and import styled from the config at the top:

// Change the import to where you put your stitches.config file
import { styled } from '../stitches.config';

Now write the style for your button. Instead of using template string syntax like in styled-components, Stitches opts to implement the styling pattern using plain object syntax to reduce the bundle size:

import { styled } from '../stitches.config';

const Button = styled('button', {
  color: '#fff',
  backgroundColor: '#007bff',
  borderRadius: '10px',
  fontSize: '16px',
  fontWeight: 400,
  paddingTop: '10px',
  paddingBottom: '10px',
  paddingLeft: '16px',
  paddingRight: '16px',
  '&:hover': {
    backgroundColor: '#0069d9',
  },
});

export default Button;

Now you need to import your component in order to render it:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from './components/Button'

function App() {
  return (
    <Button>This button is styled using Stitches</Button>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

And that’s it. You now have a Stitches button component rendered on the screen:

Here’s a button component styled using Stitches.

Let’s learn about how you can create various versions of your component next.

Stitches built-in variant support

One of the key features in Stitches is its support to write multiple variants of the same component as a first-class API. You can write variants directly inside the styling object syntax, which will be compiled as props of that component. Here is the same button component again but with color variant:

const Button = styled('button', {
  color: '#fff',
  backgroundColor: '#007bff',
  borderRadius: '10px',
  fontSize: '16px',
  fontWeight: 400,
  paddingTop: '10px',
  paddingBottom: '10px',
  paddingLeft: '16px',
  paddingRight: '16px',
  '&:hover': {
    backgroundColor: '#0069d9',
  },
  variants: {
    color: {
      violet: {
        backgroundColor: 'blueviolet',
        ':hover': {
          backgroundColor: 'darkviolet',
        },
      },
      gray: {
        color: '#000',
        backgroundColor: 'gainsboro',
        ':hover': {
          backgroundColor: 'lightgray',
        },
      },
    },
  }
});

When you render the button, you just need to specify the color as its props:

<div style={{ display: 'flex', gap: '20px' }}>
  <Button color="violet">Violet button</Button>
  <Button color="gray">Gray button</Button>
</div>

And it will be rendered accordingly:

Variations of the same button component.

For further information, please check out Stitches’ variant documentation. Now that you know about variant support, let’s move on to configuration properties.

Configuration properties in Stitches

As we’ve seen previously, there are four configuration properties that you can set when calling on the createStyled function:

• prefix
• tokens
• breakpoints
• utils

Let’s learn how these configurations can improve your developer experience.

#react #javascript #css #web-development #programming