Did you know that over 97% of websites use CSS for styling?

Cascading Style Sheets, or CSS, allows developers to build good-looking, scannable, and presentable web pages. 

CSS language specifies how documents are presented to the user. A document, in this case, is a file written in a markup language such as XML or HTML. 

What is styling in React?

The simplicity of creating, running and maintaining a React app is the main reason behind its popularity. React is a JavaScript library rather than a framework, offering more than just pre-written functions and code snippets. 

The availability of reusable components, its flexibility, code stability, speed and performance are some of the reasons why React is ranked high among JavaScript frameworks and libraries. 

Styling in React is the process of making various components in a React app visually appealing using CSS. However, it is worth noting that React uses JSX (JavaScript and XML) instead of HTML as its markup language. One of the major differences is that HTML uses .class to label classes while JSX uses .ClassName to denote the same. 

Why should you style React using CSS?

• Make your app responsive. Modern web apps should be accessible on both small and large screens. CSS allows you to apply media queries to your React app and make it responsive to varying screen sizes.
• Speed up the development process. You can use the same CSS rule across several components of your React app. 
• Make the React app maintainable. Making appearance changes to specific components/ parts of your app is easy using CSS. 
• Improved user experience. CSS allows user-friendly formatting. A React with text and buttons in logical places is easy to navigate and use. 

There are several approaches that developers can use to style their React apps. The following are some of the most common;

Write Inline Styles

Inline styles are the easiest approach to styling a React app, as users don’t need to create an external stylesheet. The CSS styling is applied directly to the React code.

It is worth noting that inline styles have high precedence over other styles. Thus, if you had an external style sheet with some formatting, it would be overridden by the inline style. 

This is a demonstration of inline styling in a React app. 

import React from 'react';

import ReactDOM from 'react-dom/client';

const Header = () => {

  return (

    

      
Hello World!!!!!

      
Add a little style!

    

  );

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
);

The displayed element will display an h1 with a light blue background. 

Pros of inline styling

• Quick. It is the simplest approach, as you add style directly to the tag you want to style.
• Has great preference. Inline styles override external stylesheets. Thus, you can use it to focus on a particular functionality without changing the entire app. 
• Awesome for prototyping. You can use inline styles to test functionality before incorporating the formatting on an external style sheet. 

Cons of inline styling

• Can be tedious. Styling every tag directly is time-consuming. 
• Limited. You can’t use CSS features like selectors and animations with inline styles. 
• A lot of inline styles make JSX code unreadable. 

Importing External Stylesheets

You can write CSS in an external file and import it to the React app. This approach is comparable to importing a CSS file in an HTML document’s tag.

To achieve this, you need to create a CSS file in your app’s directory, import it to your target component and write style rules for your app.

To demonstrate how external CSS stylesheets work,  you can create a CSS file and name it App.css. You can then export it as follows. 

import { React } from "react";

import "./Components/App.css";

function App() {

  return (

    


    

  );

}

export default App;

The above code snippet imports an external stylesheet to the App.js component. The App.css file is located in the Components folder. 

Pros of external CSS style sheets

• Reusable. You can use the same CSS rule/s across different components in a React app. 
• Makes code more presentable. Understanding code is easy when using external stylesheets. 
• Gives access to advanced CSS features. You can use pseudo-classes and advanced selectors when using external style sheets.

Con of external CSS style sheets

• Requires reliable naming convention to ensure styles don’t override.

Use CSS Modules

React apps can get really big. CSS animation names and class names are, by default, scoped globally. This setting can be problematic when dealing with large style sheets, as one style can override another. 

CSS Modules solve this challenge by scoping animation and class names locally. This approach ensures that class names are only available within the file/ component where they are needed. Each class name gets a unique programmatic name, avoiding conflicts. 

To implement CSS Modules, create a file with .module.css. If you want to name your stylesheet as style, the file name will be style.module.css. 

Import the created file into your React component, and you will be ready to start. 

Your CSS file might look something like this;

/* styles.module.css */

.font {

  color: #f00;

  font-size: 30px;

}

You can import the CSS Module on your App.js as follows;

import { React } from "react";

import styles from "./styles.module.css";

function App() {

  return (

    
Hello Geekflare reader

  );

}

export default App;

Pros of using CSS modules

• Integrates easily with SCSS and CSS
• Avoids class name conflicts

Cons of using CSS modules

• Referencing class names using CSS modules can be confusing for beginners. 

Use Styled-Components

Styled components allow developers to create components using CSS in JavaScript code. A styled component acts as a React component that comes with styles. Styled Components offer dynamic styling and unique class names. 

To start using Styled Components, you can install the package on your root folder using this command;

npm install styled-components

The next step is importing Styled Components to your React app

The following is a code snippet of App.js that uses Styled Components;

import { React } from "react";
import styled from "styled-components";

function App() {

  const Wrapper = styled.div`

    width: 80%;

    height: 120px;

    background-color: lightblue;

    display: block;

  `;

  return ;

}

export default App;

The rendered app will have the above styles imported from Styled Components. 

Pros of Styled Components

• It is predictable. Styles in this styling approach are nested into individual components. 
• No need to focus on your classes’ naming conventions. Just write your styles, and the package will take care of the rest. 
• You can export Styled Components as props. Styled Components convert normal CSS to React components. You can thus reuse this code, extend styles through props, and export. 

Con of Styled Components

• You have to install a 3rd party library to get started. 

Syntactically Awesome Style Sheets (SASS/ SCSS)

SASS comes with more powerful tools and features that are missing in normal CSS. You can write styles in two different styles guided by these extensions; .scss and .sass. 

The syntax for SASS is similar to that of usual CSS. However, you do not need the opening and closing brackets when writing style rules in SASS. 

A simple snippet of SASS will appear as follows;

nav

  ul

    margin-right: 20px

    padding: 0

    list-style: list

  li

    display: block

  a

    display: block

    padding: 6px 12px

    text-decoration: underline

nav

To start using SASS into your React app, you need to first compile SASS to plain CSS. After setting up your app through the Create React App command, you can install node-sass to take care of compilation. 

npm install node-sass

You can then create your files and give them either .scss or .sass extensions. You can then import your files in the normal way. For example;

import "./Components/App.sass";

Pros of SASS/SCSS

• It comes with many dynamic features such as mixins, nesting, and extending. 
• You don’t a lot of boilerplate to write CSS code when using SASS/SCSS

Cons of SASS/SCSS

• Styles are global, and you may thus come across overriding issues. 

Which is the best styling approach?

Since we have discussed five approaches, you want to know which is the best. It is hard to highlight the outright winner in this discussion. However, these considerations will help you make an informed decision:

• The performance metrics
• Whether you need a design system
• The ease of optimizing your code

Inline styling is suitable when you have  simple app with few lines of code. However, all the others; external, SASS, Styled Components and CSS Modules, are suitable for big apps. 

What are the best practices for maintaining CSS in a Large React Application?

• Avoid inline styling. Writing inline CSS styles for every tag in a large React app can be tiring. Instead, use an external style sheet that suits your needs. 
• Lint your code. Linters such as Stylelint will highlight styling errors in your code so that you can fix them early. 
• Do regular code reviews. Writing CSS seems fun, but regular code reviews make it easy to identify bugs early. 
• Automate tests on your CSS files. Enzyme and Jest are awesome tools you can use to automate tests on your CSS code. 
• Keep your code DRY. when dealing with commonly used styles such as colors and margins, use utility variables and classes as it goes with the Don’t Repeat Yourself (DRY) principle. 
• Use naming conventions such as Block Element Modifier. Such an approach makes it easy to write CSS classes that are easy to understand and reuse. 

Conclusion 

Above are some of the ways you can use to style React. The choice of styling approach will depend on your needs, skills, and taste. You can even combine several styling approaches, such as inline and external style sheets, in your React app. 

You may also explore some best CSS frameworks and libraries for front-end developers.