Comparing styling framework paradigms
First, we need to understand how these mental models differ from regular CSS.
- Utility-First
- CSS-in-JS
- Component library
Styling frameworks are often compared by performance or features, but they actually represent different mental models for describing UI.
Utility-First
Tailwind CSS・Uno CSS・Master CSS
The advantage of the utility-first approach is that developers can start writing as they read and follow the documentation. Developers never get lost and the documentation always shows them the way.
CSS-in-JS
- Emotion
- Styled-Components
- Styled-JSX
- Linaria
- Vanilla-extract
- Next-Yak
- Pigment-CSS
- Panda CSS
- StyleX
- Plumeria
The CSS-in-JS approach provides an experience that is not too different from writing CSS in objects or template literals, and its strengths are its maintainability and ease of use.
Component library
Kuma UI・Chakra UI・Material UI・Shadcn UI
The advantage of using the Component Library is that you can directly use pre-designed components. These include Material UI, built with Pigment-CSS, and Shadcn UI, written with Tailwind CSS.
Personal view
I would like to conclude by describing the mental model I, Refirst 11, had when I actually tried using it.
Utility-First
Mental Model: Assemble (組み立てる)
It's incredibly fast to start writing, and the speed at which you can achieve your goals is overwhelmingly fast. However, the ease of subsequent modifications remains questionable.
CSS-in-JS
Mental Model: Describe (記述する)
It's easy for developers familiar with CSS to use, and its compatibility with CSS is particularly reassuring. While development speed is average, simple methods have been established, such as using AI to read and write the syntax.
Component Library
Mental Model: Select (選択する)
This approach is relatively easy to build because it only requires you to make closed design choices based on your objectives, but development speed is average. However, the level of customizability is questionable.