CSS Modules vs. Styled Components: Which is Better?

CSS modules and styled-components have had their fair share of popularity in the front-end landscape. There has been and is a heated debate between the two when building in a modern front-end framework. In this article, I weigh out some pros and cons of CSS Modules vs. Styled Components and how they affect the styling process.

The article covers only the stand-out pros and cons because covering them all would be difficult and lengthy. The composition also runs under the presumption that you, the reader, have prior knowledge of CSS and CSS-in-JS.

CSS Modules

Pros

Local by Default

Say two or more modules have similarly named classes that perform different functions; what normally would be unacceptable and erroneous is not an issue in CSS Modules. Here, each file is compiled separately to use similar names, and you needn’t worry about the consequences.

Composition

The .compose is the CSS module’s most handy feature. Much like the @extend in Sass, the “composes” keyword includes all the styles from .common. While Sass rewrites the CSS selectors, CSS modules change which classes are exported to JavaScript.

Sharing b/w Files

In a global namespace where variable names clash with each other, you lose visibility of which components depend on which variables. CSS modules run a single file at a time, i.e., no global scope issues, plus it lets us compose from another file.

Cons

Mixing Modules

Combining or mixing CSS modules with global CSS classes can be tedious and inconvenient.

Build Tools

CSS modules require extra build tools, for example, ‘Webpack.’

Undefined Module Reference

Reference to undefined CSS modules resolves in undefined without any warning.

Styled Components

Pros

No Global Scopes

The most significant advantage of styling in styled-components no longer has to worry about selector names in the global scope with surging overrides.

Theming

Styled Components provides a ThemeContext that is by default introduced to your styled definitions, making it accessible to all your components and to which you can pass your theme objects.

Dynamic Styling

With styled-components, you can access props passed to the components in React. Accessing these props, similar to the access you get to your theme, opens up powerful opportunities to create customizable and reusable components.

Cons

Learning Curve

Though the learning curve of styled-components is not that steep, it still requires you to think differently compared to CSS. Most of the styled-components advanced features are optional, and you can use traditional CSS with no issues but can impede progress in a team that isn’t familiar with CSS-in-JS.

Performance

In styled-components, the style definitions are resolved into plain CSS at build time, dropping them into style tags at the head of the index.html file. This increases the size of the HTML file and restricts lumping the output CSS. Plus, the dynamically generated class names break cache as things change between builds.

Painful integration with Legacy CSS

It can be difficult to integrate styled-components with traditional CSS or a UI library like Material UI. The process can be tasking and makes it hard to locate and debug styles.

Other useful articles: