Styled Components vs Css Modules

In React, we can use Css Modules to create reusable CSS classes. However, we can also use Styled Components. In this article, We will answer the question: Which one should I use?

Technically, Css Modules transforms style names using a hash-based on the filename, path, style name. Styled Components handles styles in JS runtime, adding them as they go to the head HTML section of the page.

Advantages of Styled Components

Reusable
Just as the normal React components, you can make small reusable pieces of code and avoid code duplication. Typical use cases are buttons, tables, forms, etc.
Writing pure CSS
One of the biggest advantages of Styled Components in comparison to other styling solutions in React. You don’t to use weird syntax and write the CSS as a JavaScript object. Inside the template literals, you write SCSS or plain CSS. You also avoid the hassle with the media queries - it’s straightforward, just as classic CSS.
Dynamic styling
By using props you can have dynamic values, which gives you a high level of flexibility by avoiding writing duplicated styles.
Out-of-the-box theming support
With ThemeProvider you can create a powerful theme-based architecture while maintaining full control over the styling in the individual component.
No class name bugs
Styled components generate unique class names for the defined styles. In this way, there is no duplication or unexpected overwriting.
Better performance
The library is smart enough to keep track of the components rendered on a page and not load the styling for unused components. In big application, this may have a big impact on the performance in comparison to the “old school” styling where you load all the styles at once.
Nesting
You can use nested CSS in Styled Components.

Disadvantages of Styled Components

All in Head
Css-in-js parses all the style definitions into plain vanilla CSS and put everything inside style tag in index.html file. This will increase html file size.
Slow Rendering
Browser will not start interpreting the styles until styled-components has parsed them and added them to the DOM, which slows down rendering.

Advantages of Css Modules

Update without worrying
You can confidently update any CSS file without worrying about affecting other pages
Random Css Classes
Using Css Modules generates random CSS classes when displayed in the browser
No class name bugs
Css-in-js generates unique class names for the defined styles. In this way, there is no duplication or unexpected overwriting.
Maintaniable Code
Css Modules is easier to maintain and understand
Performance
Css Modules is performant and faster than Styled Components
Easy usage with CSS Framewors
Css Modules is easier to use with CSS Frameworks like Tailwindcss.

Disadvantages of Css Modules

Object
You have to use styles object whenever constructing a className.
Without Warning
Reference to an undefined CSS Module resolves to undefined without a warning
No nesting
Css Modules is not allowed to use nesting you have to use scss or less for nesting

Styled Components vs Css Modules

In React, we can use Css Modules to create reusable CSS classes. However, we can also use Styled Components. In this article, We will answer the question: Which one should I use?

Technically, Css Modules transforms style names using a hash-based on the filename, path, style name. Styled Components handles styles in JS runtime, adding them as they go to the head HTML section of the page.

Advantages of Styled Components

Reusable

Just as the normal React components, you can make small reusable pieces of code and avoid code duplication. Typical use cases are buttons, tables, forms, etc.

Writing pure CSS

Dynamic styling

By using props you can have dynamic values, which gives you a high level of flexibility by avoiding writing duplicated styles.

Out-of-the-box theming support

With ThemeProvider you can create a powerful theme-based architecture while maintaining full control over the styling in the individual component.

No class name bugs

Styled components generate unique class names for the defined styles. In this way, there is no duplication or unexpected overwriting.

Better performance

The library is smart enough to keep track of the components rendered on a page and not load the styling for unused components. In big application, this may have a big impact on the performance in comparison to the “old school” styling where you load all the styles at once.

Nesting

You can use nested CSS in Styled Components.

Disadvantages of Styled Components

All in Head

Css-in-js parses all the style definitions into plain vanilla CSS and put everything inside style tag in index.html file. This will increase html file size.

Slow Rendering

Browser will not start interpreting the styles until styled-components has parsed them and added them to the DOM, which slows down rendering.

Advantages of Css Modules

Update without worrying

You can confidently update any CSS file without worrying about affecting other pages

Random Css Classes

Using Css Modules generates random CSS classes when displayed in the browser

No class name bugs

Css-in-js generates unique class names for the defined styles. In this way, there is no duplication or unexpected overwriting.

Maintaniable Code

Css Modules is easier to maintain and understand

Performance

Css Modules is performant and faster than Styled Components

Easy usage with CSS Framewors

Css Modules is easier to use with CSS Frameworks like Tailwindcss.

Disadvantages of Css Modules

Object

You have to use styles object whenever constructing a className.

Without Warning

Reference to an undefined CSS Module resolves to undefined without a warning

No nesting

Css Modules is not allowed to use nesting you have to use scss or less for nesting