Styling React App: Stylify CSS vs Styled Components

Styling React App: Stylify CSS vs Styled Components

NoLimit Wehosting for $2/month.
Code WN241PJLO2

Stylify generates utility-first CSS based on what you write. It works with any framework and with any tool. Styled Components is a library for styling React components.

This article is not about which tool is better but about comparing approaches when styling the app with these tools.

Introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

• ✅ CSS-like selectors
• ✅ No framework to study
• ✅ Less time spent in docs
• ✅ Mangled & Extremely small CSS
• ✅ No CSS purge needed
• ✅ Components, Variables, Custom selectors
• ✅ It can generate multiple CSS bundles

Also we have a page about what problems Stylify CSS solves and why you should give it a try!

Setup

For all the examples below, I am going to use the vite-react setup.

Stylify requires the installation and a bit of configuration. It’s because the CSS is generated during a build before the app is initialized:

npm i -D @stylify/unplugin

And the vite.config.js:

const stylifyPlugin = stylifyVite({
	bundles: [{
		outputFile: './src/stylify.css',
		files: ['./src/**/*.js', './src/**/*.jsx'],
	}]
});

export default defineConfig({
	plugins: [stylifyPlugin, react()]
});

You can try to edit the Stylify+Vite+React and Stylify+Next examples on Stackblitz.

Styled Components only requires to install the library and it can be used right away.

npm i styled-components

Syntax and usage

When you want to style an element with the Styled Components, you can use the CSS API or create a component:

const Title = styled.div`
	color: blue
	font-weight: bold
`;

<Title>Hello World!🎉</Title>

The generated CSS looks like this:

.sc-bdVaJa {} .knKEua{color:blue;font-weight:bold;}

Stylify on the other hand takes file content and generates CSS for each matched selector. Each selector is by default a utility and is generated only once.

The syntaxis by default native CSS property:value. Also, when writing values, you can use _ (underscore) instead of space and ^ for a quote. It is similar to Tailwind, but without having to learn and remember the custom selectors and shortcuts. If you know CSS you already know the Stylify CSS selectors. In case you need want shorter or custom selectors, you can add your own macros.

The selectors can be written right away without defining a component.

<div className="color:blue font-weight:bold">Hello World!🎉</div>

CSS output:

.color\:blue {color:blue}
.font-weight\:bold {font-weight:bold}

However, nobody wants bloated templates with utilities. Sometimes the components are necessary. They can be defined globally in a config or locally in a file (through content options), where they are used. In the file, it expects a javascript object without the surrounding brackets. The definition is recommended within comments because almost any file format can handle comments. In Stylify the component is a CSS class and it can be used on any element:

/*
stylify-components
	title: 'color:blue font-weight:bold'
/stylify-components
*/
<div className="title">Hello World!🎉</div>

The title selector in the CSS is attached to each selector it requires. Because of that, there are fewer selectors/duplicates and the CSS is smaller.

.color\:blue,.title{color:blue}
.font-weight\:bold,.title{font-weight:bold}

When it comes to production, the selectors can be minified:

<div class="d">Hello World!🎉</div>

.a,.d{color:blue}
.b,.d{font-weight:bold}

Media queries

When we need a different style for various media queries, we can do that like this in Styled Components:

const Title = styled.div`
	color:blue
	@media (max-width: 768px) {
		color:red
	}
`;

With Stylify, you can use predefined screens or dynamic ones:

/*
stylify-components
	title: `
		color:blue
		md:color:red
		minw640px:color:orange
	`
/stylify-components
*/
<div className="title">Hello World!🎉</div>

Variables

Variables can be used within the Styled Components directly in the styles:

const Title = styled.div`
	color: ${props => props.color || "red"}
`;

Stylify allows you to define variables and then use them within the selectors:

/*
stylify-variables
	blue: '#005EB8',
	red: '#8b0000'
/stylify-variables

stylify-components
	title: 'color:$blue'
/stylify-components
*/
<div className="color:$red"></div>

When there is a case that we need various types of one button, we need to write the full selectors in stylify

<div className={`wrapper searchDiv ${isOrangeButton ? 'color:orange' : 'color:blue'}`}></div>

Keyframes

The keyframes in the Styled Components can be defined like this:

const rotate = keyframes`
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
`;

const Rotate = styled.div`
	animation: ${rotate} 2s linear infinite;
`;

In Stylify CSS it looks a bit different

/*
stylify-keyframes
	rotate: `
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	`
/stylify-keyframes
*/
<div class="animation:rotate_2s_linear_infinite"></div>

A simple animation example:

Plain selectors

When it comes to global styles and simple selectors, they can be defined within the Styled Components using createGlobalStyle:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
	button { color:red }
`;

<React.Fragment>
	<GlobalStyle />
</React.Fragment>

In Stylify, the same thing is achieved using plain selectors. The selectors are directly injected into the generated CSS file.

/*
stylify-customSelectors
	button: 'color:red'
/stylify-customSelectors
*/
<button></button>

Splitting CSS

The Styled Components doe’s a good job when it comes to optimization as it automatically splits the CSS into critical and noncritical and injects the CSS of those components that are used. However, the compilation is done when the app is running.

Stylify doesn’t work that way. It generates CSS files according to your configuration and you have to tell the app when the CSS should be loaded. You can configure a bundle for each page/component/layout separately. Even though you can split the CSS however you want, thanks to the utilities/components combination the CSS size is going to be relatively small as the selectors are generated only once. So sometimes it makes sense to have only Front + Admin CSS. Stylify website has less than 20 Kb and other websites are between 30-50 Kb. One more feature is, that it doesn’t slow down the app because the CSS is generated before the app is initialized.

Thanks for help!

Also a big thanks goes to Luke Shiru for reviewing the information about the Styled Components.