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:
Stitches avoids unnecessary prop interpolations at runtime, making it significantly more performant than other styling libraries
Stitches supports cross-browser server-side rendering, even for responsive styles and variants
Variants have first-class support, enabling you to design composable component APIs
Define multiple themes with CSS variables, then use them in your component by defining the class name
Due to its atomic output, specificity issues are a thing of the past
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.
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 clashestokens
: special variables that you can define and apply as CSS valuesbreakpoints
: create responsive breakpoints to aid you in writing responsive stylesutils
: create custom functions that acts as a shorthand for writing your CSS propertiesAnd return two functions for your styling needs:
styled
: a function to create React components with stylescss
: 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.
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.
As we’ve seen previously, there are four configuration properties that you can set when calling on the createStyled
function:
Let’s learn how these configurations can improve your developer experience.
#react #javascript #css #web-development #programming