There are several ways to style react app. Each one has its own pros and cons. In this article, I’ll show you ways of using stylings and what is the best option.

“If you tell yourself you can’t, you won’t.” -Dean Graziosi

I’ll mention primary ways to style a react app. There is a number one option in this, for me. When choosing a way, we must consider two crucial topics; Firstly every project has different needs. Secondly, developers; whose the main characters of the software. We should consider developers’ skillsets, the project’s future, etc. Long story short all these things should be evaluated wisely.

Let’s start.

— INLINE STYLING

This is the most basic option. It’s just like coding HTML. Styling elements inline doesn’t require you to create a separate stylesheet.

PROS 👍🏻

• I think this way doesn’t have any pros.

CONS 👎🏻

• Repeating yourself over and over again because this is not global.
• Bad syntax.
• It will make codes unreadable, surely.
• Very hard refactoring.
• Basic CSS features like animations, selectors are not usable.

If the app will be very small maybe you can select, otherwise you shound’t select this option. I think.

— PLAIN CSS

This way is the most common approach. It’s easy to use and understandable. Write CSS in another file and import it to style a component’s element.

PROS 👍🏻

• Includes all CSS features like variables, advanced selectors, animations, etc.
• Clean and understandable.

CONS 👎🏻

• As the project grows it becomes harder to think of unique class names.
• Too much repeating yourself. Compared to SASS
• Not scoped.
• May be conflicting on naming.

This option can be selectable. But if you define the project as big, skip this.

— SASS / SCSS

SASS is a preprocessor for CSS. Stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass has features that don’t exist in CSS yet like nesting, mixins, inheritance, and other nifty goodies that help you write robust, maintainable CSS.

PROS 👍🏻

• If CSS is a human, SASS is hulk 😄 Just look at the features it has.
• Better structure. You’ll not repeat yourself.

CONS 👎🏻

• Like CSS, not scoped.
• Requires setup. Look at the official site for setup.

— CSS MODULES

This one is actually an alternative to the last two options (Css,scss). Everything is the same but by using this our CSS codes will be scoped.

It has a simple usage. Let’s say you have a file named Home.jsx, create another file here and give a name as Home.module.scss. And simply import this file to Home.jsx.

By using this our classnames will be unique.

Naming style: fileName_className__[unique_identifier]. Example:

<div class="Home_home__9Ke73">

PROS 👍🏻

• Scoped.
• Unique classnames. There will be no conflicts
• Do not require setup

CONS 👎🏻

• Maybe multiple classnames will be tricky, but easy to learn.

For multiple and conditional classnames can be use classnames.

— CSS in JS

You can write CSS in the react file, like HTML. React made this possible. These codes will be scoped too, obviously.

Usage example:

import styled from "styled-components";

const Button = styled.button`
  color: limegreen;
  border: 2px solid limegreen;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
`;

PROS 👍🏻

• Scoped.
• Unique classnames. There will be no conflicts
• It can be reusable and extendable with export. Because it’s javascript now.
• Naming will be easier.
• Props can be used easily. This is the best thing by far.

CONS 👎🏻

• Third-party libraries have to use.
• Files will be complicated.
• I think it’s suffocating. I don’t like using this.

— USING A THIRD-PARTY LIBRARY

There are many CSS libraries and pre-made components out there. Like tailwind, bootstrap, chakraUI, and materialUI. Using there may be easier compared to others.

PROS 👍🏻

• Faster and much more controllable styling.
• Scoped. Because writing in ‘classnames’

CONS 👎🏻

• Styling and HTML are mixed. This looks bad and complicated.
• If you’re new, takes time to learn.
• You are likely to repeat yourself.

What am I using?

I usually use CSS modules with SCSS. Because this meets all my requests, easy and common.

Firstly I’m creating a styles folder in assets and creating global files in it like animations, global, mixins, and variables. After that, I combine these in main.scss file and in index.css refer it with import.

By the way, I have a folder structure article. If you wanna read, you can simply click the following link.

React Folder Structure Deep Dive

The folder structure matters in many ways; it eases understanding, refactoring, and sustainability. In this article…

And every other file has a .module.scss file. This way I kept the advantages of multiple options.

Conclusion

I mentioned nearly every possible way to style react app. Every option has pros and cons. Choosing may be tough. But like I said before, must be evaluated wisely.

I hope this guide helps you.

Author: Mahir Uslu

Tags