A styling system based on style objects and SCSS
May 2023, by Maarten Nieber
Introduction
Thoughts on TailwindUI, SCSS, UIkit, CSS-in-JS and MaterialUI
Style objects
Using style objects and trim objects in custom components
Conclusion
Introduction

Goals

I will explain a hybrid approach - based on inline styles and SCSS - for writing style-related code that is compact, flexible and maintainable.

Why do we need a styling system?

A large fraction of the code is related to styling the application. To make this code maintainable, it needs to be well structured and predictable. A styling system can help us to achieve that. It tells us how styles are defined, how styles are applied to elements, and how they are adapted to different contexts (e.g. the current theme). Without a system, it's very likely that different solutions will be used in different places, which will make it harder to understand and maintain the code.

Sample code

There is a sample application, annotated with comments, that explains the approach. Enter the following commands to run it:

git clone git@github.com:mnieber/blog-sample-apps.git
cd blog-sample-apps
yarn stylingSystem-sample
# Open the browser at http://localhost:3000

Conventions

I will sometimes use the terms HTML and JSX interchangeably (since JSX is a way to write HTML inside Typescript).

Outlook

In this article I will share my thoughts on writing style code. I will start by discussing various approaches for creating UIs: TailwindUI, SCSS, UIkit, CSS-in-JS and MaterialUI. I will discuss what I like and dislike about these approaches, and explain what qualities I aim for in a styling system. Then, I will discuss style objects; these are a type of loosely defined component that we can mix into our concrete components. Finally, I will introduce a hybrid approach for implementing styles that is based on custom components, style objects, inline styles and SCSS.

12345