Combine Styled Components with CSS Modules to Unleash Power

I am pretty confident that styled components and CSS modules are two powerful tools for managing and scaling CSS in modern web applications, since I have been using them in my personal projects. In this follow-up, we will explore some advanced techniques and best practices for using styled components and CSS modules to create a robust and maintainable CSS architecture.

Let's dive in already.

Theming with Styled Components

One of the most powerful features of styled components is the feature that let us create a theme for the entire application with a few lines of code. This allows you to maintain a consistent design and make global changes easily. To use theming, you’ll need to wrap your application in a ThemeProvider component from the styled-components library and pass your theme object as a prop:

jsxCopy
1import { ThemeProvider } from 'styled-components';
2
3const theme = {
4  primaryColor: 'orange',
5  secondaryColor: 'yellow'
6  // ...some other theme properties
7};
8
9const App = () => (
10  <ThemeProvider theme={theme}>
11    {/* Your application components */}
12  </ThemeProvider>
13);

Now, you can access your theme properties in your styled components by using the props theme object like this:

jsxCopy
1const Button = styled.button`
2  color: white;
3  background-color: ${(props) => props.theme.secondaryColor};
4  // ...some other styles
5`;

This allows you to maintain a consistent design system throughout your application and make global changes easily.

Combining both Styled Components and CSS Modules

Styled components and CSS modules each have their own unique advantages, you can also combine them for even more powerful and flexible styling. For example, you can use CSS modules for the base styles of your components and styled components for dynamic styles based on props or themes:

cssCopy
1/* Button.module.css */
2.button {
3  padding: 10px 20px;
4  border: none;
5  border-radius: 5px;
6  cursor: pointer;
7}

jsxCopy
1// CustomButton.jsx
2import styles from './Button.module.css';
3
4const Button = styled.button`
5  color: white;
6  background-color: ${(props) =>
7    props.primary ? props.theme.primaryColor : props.theme.secondaryColor};
8
9  &:hover {
10    background-color: ${(props) => (props.primary ? 'darkblue' : 'darkred')};
11  }
12`;
13
14const CustomButton = (props) => (
15  <Button className={styles.button}>{props.buttonText}</Button>
16);

With this combination, you can leverage the strengths of both styled components and CSS modules, creating a more maintainable and scalable CSS architecture.

Best Practices for Styled Components and CSS Modules

To get the most of styled components and CSS modules powers, we should consider the following best practices:

• Consistent naming conventions: Use a consistent naming convention for your styled components and CSS modules, such as PascalCase for styled components and camelCase for CSS modules.

• Organize your components: Organize your components and their styles in a logical folder structure, making it easier to find and maintain your code.

• Use linters and format your code: Use tools such as ESLint and Prettier to maintain consistent code style and enforce best practices across your project.

• Separate styles from components: Keep your styles separate from your component logic by creating a separate file for each styled component or CSS module.

• Optimize your components for performance: Be mindful of performance when using styled components and CSS modules. Avoid unnecessary re-renders and excessive use of props or theme variables, which lead to performance issues.

When you follow the best practices, you can ensure that your CSS codebase remains performant, maintainable, scalable and easy to understand.

Thanks for reading!