Introduction
The what and the why of CSS Components.
Phantom is a firm believer in the versatility and power of CSS-in-JS, using it for all its projects. However, with the advancements in React like Server Components and Next.js 13, using CSS-in-JS can become a challenge. The conventional CSS styling options fail to offer a seamless developer experience and result in cluttered code.
CSS Components was created to solve these problems by offering a React component library that prioritizes component architecture and developer experience. Inspired by Stitches, it brings the core functionality to React components, making it easier to wrap CSS styles in React and streamline the use of CSS styles. CSS Components is not a complete styling system, but rather a convenient tool that enhances the developer experience.
CSS Components stands out with its simplicity, providing a straightforward way to use standard CSS styles as reactive React components. The CLI automatically builds components from CSS files following a specific naming convention, making the use of CSS styles more efficient in React.
At Phantom, CSS Components has been successfully used in multiple projects with positive results. It offers a clean solution that has had zero developmental issues.
CSS Components offers a fresh take on using CSS styles in React, different from other CSS-in-JS solutions. Its approach is innovative, yet familiar in terms of developer experience. It provides a clean and efficient way to incorporate CSS styles into React projects.
Highlights
Familiar Experience
If you have used Stitches or styled-components you will feel at home.
The concept of variants are exactly the same. CSS Components essentially modernises the traditional CSS authoring pipeline and provides a great developer experience.
Server Components
Many UI libraries do not support Server Components and more traditional CSS techniques are needed.
CSS Components works flawlessly with Server Components and works alongside your traditional CSS system (e.g. CSS Modules).
Key Features
Variants
Cribbed from Stitches, variants is a first-class citizen, so you can design composable component APIs.
You can define a single variant, multiple variants, and even compound variants which allow you to define styles based on a combination of variants.
Variants can be applied conditionally or responsively.
CLI Tools
CLI Tools Allows you to run a simple command to scan your codebase for css files and automagically generate the corresponding React components.
1npx css-components --css ./src/**/*.css --output styles.ts 2
Overrides
CSS Components internally rides on the className prop but respects any classNames you pass in.
1<Button style={{ backgroundColor: "red" }}>Button</Button> 2
You can also pass in a className and CSS component will pass it through along with its internal styles.
1<Text className="massive">Heading</Text> 2
Developer Experience
One of our main goals is to provide the best possible developer experience. CSS Components provides a fully-typed API, so when using TypeScript, CSS properties, values, and breakpoints will be auto-completed for you.
Credits
We're grateful for everyone who contributed and provided feedback along the way.
Special thanks to John Chipps-Harding for kicking this project off.
Special thanks to Guy for risking all trying out CSS Components on a tight live project.
Special thanks to Balraj for thoroughly testing the library while building the css-components.net site.
Special thanks to George for styling and wrapping up the css-components.net site.