Beyond CSS in JS: Why CSS Components are Trending
CSS in JS has proven its success. Yet, when CSS components are involved, there’s more room for modularity.
The landscape of web development continually evolves at a rapid pace. One such advancement is the integration of CSS in JS. Undoubtedly, it addressed many issues that were inherited from managing stylesheets.
However, the innovation doesn’t stop there. Now, we can structure CSS into reusable, declarative, and shareable components across projects. Under the hood, Bit toolchain manages the entire component lifecycle. Overall, CSS components offer a promising direction for managing styles more effectively in large-scale applications.
CSS in JS in a Nutshell
CSS in JS was designed to solve traditional CSS challenges, including global namespace issues, dependency management, and dynamic updating styles with application state changes.
This method embeds CSS into JavaScript, giving developers tight control over component styling. The introduction of the CSS Object Model also allowed effective manipulation of CSS from JavaScript.
All these made development simpler with IntelliSense support and cohesive styles with its JavaScript counterparts.
Advancing to CSS Components with Bit
Building on the foundation laid by CSS in JS, using Bit, we can further enhance the modularity of the code by creating components. The main advantage is that these components are encapsulated with their dependencies and stored in the Bit platform, where we can reuse them across multiple projects.
Following is an example of a React Component that uses Tailwind CSS to implement CSS in JS.
import type { ReactNode, MouseEvent } from 'react';
export type ButtonProps = {
/**
* Sets the component children.
*/
children?: ReactNode;
/**
* Function to call when the button is clicked.
*/
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
};
export function Button({ children, onClick }: ButtonProps) {
return (
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
type="button"
onClick={onClick}
>
{children}
</button>
);
}You can use this component in any React project by importing it, forking it (clone) or installing it as a dependency.
In addition to these capabilities, you can start creating your structure for CSS modularity by separating the Theme, UI configuration, etc, into components.
You can decide the granularity of your structure. For example, if your CSS structure is complex, you can break down different parts such as typography, theming, border roundness, font, font direction, etc.
Following image shows a simple structure where the theme component and tailwind configuration are created as separate components.
Also, creating a theme component is as simple as encapsulating its configuration into a separate JavaScript module.
/**
* returns theme object
*/
export function theme() {
return {
extend: {
fontFamily: {
sans: ['Arial', 'Helvetica', 'sans-serif'], // Default sans-serif font
serif: ['Georgia', 'Times New Roman', 'serif'], // Default serif font
},
colors: {
'blue-500': '#00d1ff', // Fluorescent blue
'blue-700': '#0094cc', // Darker fluorescent blue
'bg-gray-200': '#0094cc',
'gray-200': '#ccff00', // Fluorescent green for background
'blue-300': '#33ccff', // Fluorescent blue for focus ring
'blue-800': '#ff00ff', // Fluorescent pink for dark mode focus ring
'blue-600': '#00ffcc', // Fluorescent teal for checked background
},
ringColor: {
'blue-300': '#33ccff', // Matching focus ring with fluorescent blue
}
},
}
}Complete UI Architecture
Following the same principles, you can start designing your UI architecture by creating a complete design system using components. This includes creating the UI library design tokens and all the required configurations.
This way, your design and development teams can work together to plan the component structure responsible for the overall look and feel. Since the components are independent in nature, you can develop them without depending on the project that consumes them.
This way, you can build a consistent design that cuts across multiple applications and provides clear documentation for using them.
Conclusion
The evolution towards CSS components marks a significant advancement in web development practices for designing your UI as Lego blocks.
This approach addresses the limitations of both traditional CSS and CSS in JS, offering a modular, reusable, and scalable solution. And most importantly, you can design your complete design structure from the ground up, establishing a reusable culture across the organization.
And there you have it. Thank you!
