Styling React Using CSS

Best Practices for Organizing and Maintaining Your CSS in a Large React Application

Whenever you are working on a large React application, it’s very important to keep your CSS organized. This helps you manage styles better and makes your code easier to maintain. Let’s take a look at some best practices to follow:

1. Use Component-Based CSS

In React, each component can have its own CSS file. This helps you keep styles specific to each component and avoids conflicts. For example, if you have a Button component, you can create a Button.css file.

For example:

Button.js

import React from 'react';
import './Button.css';

function Button() {
  return (
    <button className="custom-button">Click Me</button>
  );
}
export default Button;

Button.css

.custom-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.custom-button:hover {
  background-color: darkblue;
}

This way, the styles for the Button component are contained within Button.css and won’t affect other components.

2. Use CSS Modules

CSS Modules help you scope your CSS to specific components. This means styles defined in one component won’t affect others. To use CSS Modules, you just need to rename your CSS file to have a .module.css extension.

For example:

Button.module.css

.button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: darkgreen;
}

Button.js

import React from 'react';
import styles from './Button.module.css';


function Button() {
  return (
    <button className={styles.button}>Click Me</button>
  );
}
export default Button;

In this example, styles.button refers to the styles defined in Button.module.css. This ensures that the styles are scoped to the Button component only.

3. Use a Preprocessor like Sass

Sass is a powerful CSS preprocessor that adds more features to CSS. It allows you to use variables, nested rules, and mixins, making your CSS more maintainable.

First, you need to install Sass:

npm install node-sass --save-dev

Then, you can create a Sass file and use it in your React component:

Button.scss

$primary-color: blue;
.button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;


  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

Button.js

import React from 'react';
import './Button.scss';

function Button() {
  return (
    <button className="button">Click Me</button>
  );
}


export default Button;

In this example, $primary-color is a variable that can be reused throughout your styles. The darken function is used to create a darker shade of the primary color for the hover state.

4. Use a CSS-in-JS Library

CSS-in-JS libraries allow you to write CSS directly in your JavaScript files. This can be very powerful and helps you keep your styles close to your components.

One popular library is styled-components:

First, install styled-components:

npm install styled-components

Then, you can use it in your component:

import React from 'react';
import styled from 'styled-components';


const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;


  &:hover {
    background-color: darkblue;
  }
`;


function Button() {
  return (
    <StyledButton>Click Me</StyledButton>
  );
}


export default Button;

In this example, StyledButton is a styled component that includes all the styles directly in the JavaScript file.

5. Keep Your CSS DRY

DRY stands for "Don't Repeat Yourself." This means you should avoid duplicating styles. Instead, use classes and mixins to reuse styles.

For example, if you have a common button style, you can create a mixin and reuse it:

styles.scss

@mixin button-style {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.button {
  @include button-style;
  background-color: blue;
  color: white;

  &:hover {
    background-color: darkblue;
  }
}

This way, you can reuse the button-style mixin in other components without duplicating the code.

Frequently Asked Questions

What is the best way to apply CSS in React?

It depends on the project. For global styles, use CSS stylesheets. For scoped styles, use CSS Modules or Styled Components.

Why use camelCase in inline styles?

React uses camelCase because JSX uses JavaScript objects instead of traditional CSS syntax.

What is the advantage of CSS Modules?

CSS Modules prevent class name conflicts by scoping styles locally to the component.

Conclusion

In this article, we discussed various ways to style React components, including inline styles, CSS stylesheets, CSS modules, and styled components. Each method has its benefits, and choosing the right one depends on your project requirements.