Unlock the Power of Composable CSS Components in Your React App
In the world of modern web development, creating reusable and maintainable CSS styles is a top priority. With the release of React 18, server components have become the new standard, but developer experience (DX) remains a common pain point when using CSS-in-JS in modern React web apps. This is where CSS Components comes in – a tiny (2.3Kb) modern utility that allows you to compose CSS classes to React components with a best-in-class DX.
Getting Started with CSS Components
CSS Components works seamlessly with all modern browsers, up to at least the last two versions. Although it’s limited to React only, it strives to be exceptional at composing styles in your React application. While it’s not yet considered production-ready, the core team is actively working on a stable release.
Adding CSS Components to Your React Project
To add CSS Components to your React project, initialize a simple React App using a framework of your choice. Then, install CSS Components as a dependency. This will allow you to utilize the styled API to create utility classes that you can use throughout the project.
Building a Reusable Button Utility
Let’s create a reusable Button component using CSS Components. First, create a folder named Button under the src directory, with two files – one for exporting the Button and another for adding additional styling using CSS modules. Then, use the variants API exposed via styled to build Button components as a utility.
Extracting Repetitive Properties to Optimize Your Styles
As you continue to add styles to the button.module.css stylesheet, you might notice some repetitive properties among all the variants. To solve this, extract all the repetitive properties and create a new utility class called.btn. This will allow you to add.btn as the common style utility in the styled API under the css key.
Using a CSS Component as a Custom React Hook
To make your components easier to use with improved DX and modularity, you can turn this component into a custom React Hook. Simply wrap the entire Hook into a function called useButton and return the Button component. Then, export this Hook and utilize it in your application.
Composing Components with CSS Components
CSS Components allows you to compose two components via the styled API. This is useful when you already have a utility component defined and you want to reuse those styles. For example, you can create a SubscriptionButton component that inherits styles from the BaseButton component.
Comparing CSS Components with Other Popular Libraries
The CSS Components team conducted a benchmark comparison between this utility and other popular solutions out there. The results show that CSS Components outperformed Emotion, Stitches, and styled-components in terms of injecting initial styles and updating CSS props.
Conclusion
CSS Components is a game-changer for React developers. It doesn’t aim to replace popular component libraries, but rather complements them by providing a modular pattern of writing code that’s maintainable and scalable. With its efficiency and ease of use, CSS Components is a must-use CSS-in-JS solution for React developers.