CSS Modules vs. Styled Components for Styling in Next.js
by SWHabitation
Styling is a big part of creating a Next.js application.
Among the popular options are CSS modules and styled components. Both come with their different strengths and use cases.
We shall delve into these two approaches, compare their pros, and help decide which might be the best fit for the project.
What are CSS Modules?
It allows you to write regular CSS, with a twist.
Every CSS file is scoped locally by default, so styles that you write won't accidentally apply to other parts of your app.
This is especially useful on large projects where style collisions can become a nightmare.
How to Use CSS Modules in Next.js ?
1. Create a CSS Module File: Create a file with the extension `.module.css`.
1
2
3
4
5
6
/* styles.module.css */
.container {
background-color: lightblue;
padding: 20px;
border-radius: 8px;
}2. Importing and Using the Styles: Import the CSS module in your component, then apply those styles with the `className` prop.
1
2
3
4
5
6
// components/StyledComponent.js
Meaning that one can import styles from './styles.module.css';
export default function StyledComponent() {
return <div className={styles.container}>Hello, CSS Modules!</div>;
}What are Styled Components?
It's a library to both React and Next.js to be able to write actual CSS within your JavaScript.
Again, the approach uses tagged template literals to style your components.
Styled Components are dynamic, meaning you can pass props in them and change styles based on those props.
How to Use Styled Components in Next.js ?
1. Install Styled Components:
First, install the library.
1
npm install styled-components2. Creating and Using a Styled Component:
Import the `styled` function and define your styled component in it.
1
2
3
4
5
6
7
8
9
10
11
12
13
// components/StyledComponent.js
import styled from 'styled-components';
const Container = styled.div`
background-color: lightblue;
padding: 20px;
border-radius: 8px;
`;
``
export default function StyledComponent() {
return <Container>Hello, Styled Components!</Container>;
}Comparing CSS Modules and Styled Components
1. Scoping and Isolation:
- CSS Modules: By preventing pollution of the global namespace, it gives scoped styling by default.
- Styled Components: Since they are a part of the component definition, styles are scoped to components naturally.
2. Dynamic Styling:
- CSS Modules: Static, and some extra logic is needed to dynamicize the styles.
- Styled Components: Native props-based dynamic styling.
3. Curve of Learning:
- CSS Modules: Easy for everyone who knows traditional CSS
- Styled Components: Requires knowledge of `styled-components` library and JavaScript template literals.
4. Performance:
- CSS Modules: Near zero runtime overhead; it evaluates the styles into standard CSS.
- Styled Components: Slightly higher runtime overhead for generating styles on the fly; however, usually negligible.
5. Developer Experience:
- CSS Modules: Easy for people who like separating style from logic.
- Styled Components: Better dev experience by co-locating styles with their components.
Which One Should You Choose?
The choice of CSS Modules/Stylable vs. Styled Components is predominantly dependent on the needs specific to the projects and preference from the team.
Choose CSS Modules if:
- You like traditional CSS.
- You want simplicity and low runtime overhead.
- You have a huge project with many developers who are familiar with CSS but not with JavaScript-based styling.
Choose Styled Components if:
- You like co-locating styles with components.
- You would like to have dynamic styling possibilities.
- You would like an advanced theming system with the latest CSS features like nesting.
How to Install Shadcn with Next.js 14: A Step-by-Step Guide
Conclusion
We have looked at two excellent ways to style Next.js applications, each having different advantages. Whether you go for simplicity and ease of use with CSS Modules or dynamism with Styled Components, you will be able to create beautiful and maintainable styles for your projects.
