Aditya Verma's Blog

How to Style Your React App?

How to Style Your React App?

Aditya Verma's photo
Aditya Verma
·

4 min read

Table of contents

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It allows you to create complex interactive UIs.

So, there are many ways we can use to style a React app, and each option has its pros and cons. So, here let’s discuss these different ways and also talk about their pros and cons.

Traditional CSS

Traditional CSS or Vanilla CSS, involves the creation of normal CSS files. So, in a React app, you can either use one CSS file to style your complete application or use CSS Modules.

CSS Modules are not specs or implementation in the browser, but rather a process in a build step that changes class names and selectors to be scoped (kinda like namespaced). 

<h1 className="home-section_heading">React makes it painless to create interactive UIs.</h1>

Let's style this element in Vanilla CSS.

.home-section_heading {
    color: black;
    font-weight: bold;
    font-size: 2rem;
}

Pros and Cons

The major downside of using Vanilla CSS is Reusability and Global Namespace. And for CSS Modules, using styles object whenever constructing a className and mixing CSS Modules and global CSS classes also can be cumbersome. When building a large application, usually it’s not recommended to use Vanilla CSS, but you can use CSS Modules if you want, but you can also shift to a CSS pre-processor for styling your app.

I would recommend if you’re a beginner, try and experiment with Vanilla CSS, try different CSS properties for a better understanding of CSS.

CSS Pre-processor

A CSS pre-processor, lets you generate CSS from the pre-processor's unique syntax, which makes it more reusable and maintainable. here can use features like - Mixins (reusing a particular CSS snippet), Global Variables, etc - which facilitates easier and more efficient development.. It also makes our code more organized and clean.

<div className="home-section">
        <h1 className="home-section_heading">React makes it painless to create interactive UIs.</h1>
</div>

Let's style this component

$font-stack: Monsterrat, sans-serif;
$primary-color: #2b60f6;


.home-section{
  width: 1100px;
  display: flex;

  &_heading {
      color: $primary-color;
      font-family: $font-stack;
      font-weight: bold;
      font-size: 2rem;
  }
}

Pros and Cons

On one hand, it makes our CSS more reusable and modular, on the other as your CSS grows naming classNames can become an issue, and also one of the biggest pain is debugging, it gets really difficult to pinpoint the issue.

CSS-in-JS

With the rise in popularity of JavaScript frameworks like React, Angular, and Vue, many developers are shifting to CSS-in-JS, and companies like Reddit, Atlassian and Patreon have made the move toward a CSS-in-JS solution.

const HomeTextHeading = styled.h1`
          color: 'black',
          fontWeight: 'bold',
          fontSize: '2rem'
`;

<HomeTextHeading>React makes it painless to create interactive UIs.</HomeTextHeading>

So here we're using Styled Components, to style CSS-in-JS

<Text
    fontSize={{ base: 'sm', sm: 'md' }}
    fontWeight='bold'
    color='gray.800'
>
    React makes it painless to create interactive UIs.
</Text>

So this is also an example of CSS-in-JS, here we're using Chakra UI

Pros and Cons

My first experience with CSS-in-JS was with styled-components. It has unique capabilities that are not necessarily included in other libraries, such as global selectors, state-based styling, caching, and much more. CSS-in-JS can be beneficial if you want to create a complex UX such as state-based functionality, but it's probably not for you if you’re a beginner.

Some CSS-in-JS libraries to explore:

I know what you're thinking, "THIS IS INLINE STYLING!". Yeah it is, but it is more than that. Just give it a try!

Using Tailwind CSS

TailwindCSS has been rapidly growing in popularity, as it provides impressive developer experience and also supports the ability for customizations.

<h1 className="text-gray-600 text-lg md:text-2xl font-bold">React makes it painless to create interactive UIs.</h1>

Pros and Cons

The Major advantage of using Tailwind CSS is you get more control over styling, It also provides the ability to create responsive themes for your web applications and remove all unused CSS classes and most importantly it makes responsive designing easy.

Many people are getting frustrated with frameworks like Bootstrap, materialize CSS, and want an alternative.

Conclusion

Selecting a particular styling approach for your application can be trivial, you must style your application based on your preferences and requisites.

The best choice can depend on your knowledge/experience as a developer, also whether you and your team are comfortable with the styling option and most importantly it depends on what you’re trying to build. Before choosing, reflect on these points. Don’t hesitate to post a comment if you have any additional questions or concerns.

Thank you for reading this article today, I hope that you found this helpful and until the next time!

ReactCSSSassstylingTailwind CSS