Choosing The Right Styling Technology

Last updated by Noel Varanda, Fri Jul 21 2023

styling

css

css-in-js

tailwind

material-ui

chakra-ui

ant-design

react-bootstrap

bootstrap

bulma

materialize

foundation

styled-components

emotion

css-modules

sass

less

Styling is a crucial aspect of modern web application development, and selecting the appropriate styling technology for your React project can be overwhelming. There are four primary categories of styling technologies:

Component libraries
CSS frameworks
CSS-in-JS libraries
CSS Preprocessors

Each of these technologies offers its own unique advantages and disadvantages. By understanding their characteristics, you can make an informed decision about which technology to use in your project. Additionally, you have the option to combine them together for enhanced flexibility and capabilities.

Component libraries

A component library provides pre-built UI components that can be easily reused across your application. It typically includes a set of ready-made components like buttons, forms, modals, and more. These components often come with their own styling and functionality.

They focus on providing a consistent and reusable UI component system, and can be used independently or in combination with other styling technologies like CSS frameworks or CSS-in-JS libraries.

Using a component library is as simple as importing the component and using it in your application. Here's an example of a button styled using Material UI:

import Button from '@mui/material/Button';
 
export const MyComponent: React.FC = () => (
  <Button variant="contained" color="primary">
    Button
  </Button>
);

Pros and cons

Pros

They can be used to speed up development.
Ensure design consistency.
They are beginner-friendly.
Excellent documentation and active community.
Ensure design consistency.
Improve overall productivity.

Cons

Limited customization options that may not align with specific design requirements.
Learning curve for understanding and working with the library's API.

Popular choices

CSS Frameworks

CSS frameworks provide a comprehensive set of pre-defined styles, utility classes, and UI components that can be used to rapidly build user interfaces. They typically offer a range of ready-to-use styles for elements like buttons, forms, grids, and more.

These frameworks focus on speeding up development and providing a consistent design language. They can be used independently or in conjunction with other styling technologies like component libraries or CSS-in-JS libraries.

For example, you can use a CSS framework like Tailwind CSS to apply pre-defined styles and utility classes to your components. Here's an example of a button styled using Tailwind CSS:

export const Button: React.FC = () => (
  <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button
  </button>
);

Pros and cons

Pros

Comprehensive set of ready-to-use styles and components.
Speeds up prototyping and development.
Responsive and mobile-first design.
Community support and extensive documentation.
Large community support.

Cons

Limited flexibility
Design constraints
Potential for bloated code
Learning curve for specific framework

Popular choices

Tailwind CSS (opens in a new tab) (Popular frameworks: ShadCN (opens in a new tab), Daisy UI (opens in a new tab), Headless UI (opens in a new tab))
Bootstrap (opens in a new tab)
Bulma (opens in a new tab)
Materialize (opens in a new tab)
Foundation (opens in a new tab)

CSS-in-JS libraries

CSS-in-JS libraries enable writing CSS styles in JavaScript, providing a powerful way to style React components. These libraries allow you to define styles directly in your code, offering component-level scoping and dynamic styles. They provide a more programmatic approach to styling and enable greater control over component-level styling.

CSS-in-JS libraries can be used independently or in combination with component libraries or CSS frameworks to style React components in a more flexible and modular way.

For example, you can use a CSS-in-JS library like Styled Components to style your components. Here's an example of a button styled using Styled Components:

const StyledButton = styled.button`
  background-color: #007bff;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
 
  &:hover {
    background-color: #0056b3;
  }
`;
 
export const Button: React.FC = () => <StyledButton>Button</StyledButton>;

Pros and cons

Pros

Greater control over styling and component CSS.
Scoped styles within components.
More granular theming and style customization.
Interoperability with other styling approaches.

Cons

Learning curve for understanding the library's syntax and concepts.
Additional build configuration/setup may be required.
Potential performance overhead for generating and processing styles.
Development speed may be affected due to the additional complexity of inline styles.

Popular choices

CSS Preprocessors

Although not redundant, CSS preprocessors are less popular than they used to be because many of the features they provide are now available in modern CSS.

CSS preprocessors are tools that extend the functionality of CSS by adding features like variables, mixins, functions, and more. They allow you to write CSS in a more modular and maintainable way.

CSS preprocessors can be used independently or in combination with other styling technologies like component libraries, CSS frameworks, or CSS-in-JS libraries.

For example, you can use a CSS preprocessor like Sass to define variables and mixins for your styles. Here's an example of a button styled using Sass:

$primary-color: #007bff;

export const Button: React.FC = () => (
  <button className="bg-$primary-color hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button
  </button>
);

Pros and cons

Pros

Extends the functionality of CSS with variables, mixins, functions, and more.
Modular and maintainable code.
Code reusability.
Large community support.

Cons

Additional build configuration/setup may be required.
Learning curve for specific preprocessor.
Potential performance overhead for generating and processing styles.
Development speed may be affected due to the additional complexity of inline styles.

Popular choices

Sass (opens in a new tab)
Less (opens in a new tab)

Comparing strategies

Trait	Component libraries	CSS frameworks	CSS-in-JS libraries
Development speed	Fast	Moderate	Slow
Customization and theming	High	Moderate	High
Performance	High	High	Moderate*
Developer experience	Good	Good	Varied
Ecosystem and community support	Extensive	Extensive	Extensive

* Runtime CSS-in-JS libraries work by inserting new style rules when components render, and this is bad for performance on a fundamental level. Read Sam Magura's Why We're Breaking Up with CSS-in-JS (opens in a new tab) for an in depth look at the performance issues with CSS-in-JS.

Can you use them all together?

Yes, you can definitely use a combination of component libraries, CSS frameworks, and CSS-in-JS libraries in your project. Each technology serves a different purpose and can complement each other effectively.

Common pairings

Radix UI + tailwind (e.g. shadcn/ui (opens in a new tab))
Material UI (opens in a new tab) (component library) + emotion (CSS-in-JS library)
Chakra UI (opens in a new tab) (component library) + styled-components (opens in a new tab) (CSS-in-JS library)

The choice of using multiple styling technologies together depends on your project requirements, preferences, and the level of flexibility and control you need over your styles.

Tailwind Component Libraries

For more libraries read 10 best Tailwind CSS component libraries (opens in a new tab).

Keep up to date with any latest changes or announcements by subscribing to the newsletter below.