CSS in React

CSS in React

Session 1: The Counterintuitive Secret to Shipping Better Articles Faster

As part of the tasks in the #HashnodeBootcamp we learned in the first session that the best way to write articles is by using the TIL format blog post technique (basically is describing something you learned as "Today I learned...) so I want to tell you something I learned today.

My learning curve

So, I'm learning frontend development and I decided to deeply learn the React JS library to land my first job as a developer. I feel prepared with the intermediate knowledge in vanilla JavaScript so I'm starting learning React because it's in more demand on many of the companies I've been researching.

If you don't know React, basically it's a JavaScript library that allows you to write better JavaScript code dividing everything into components to make everything more interactive and well-performing.

You only need to create a component and you pass data into it, either from a database or from an API. A component could be a navbar, a card, a video, a task in a to-do list app, a blog title, etc.

CSS as a styling tool

I don't want to talk too much about React, but the way you can style components.

If you're still learning HTML, CSS, and JavaScript, you just create a file (or files depending on the size of your project) and everything is separate. In React there are some other options you can use to style components.

1. The classic way: A CSS file

This is the way everybody knows, you create your regular CSS file with your custom styles and apply a class name to your component.

Once the element is rendered into HTML, it'll have a class name and you just have everything in your CSS.

import './styles.css'

const App = () =>{
    return (
        <div className="excitingTitle">
            <h1>Hello World</h1>
        </div>
    )
}

As a note, since the keyword class is reserved in the JavaScript language, that's why in React we write className, React will convert it to the class attribute once it's rendered.

2. CSS with components: CSS Modules

Rather than having a large CSS file with all classes, we create multiple CSS files per component. So if you have a Navbar.js component, you need a Navbar.css file that contains all the styles just for that component.

In that way, you will follow the components philosophy in React and the advantage is that everything will be better organized.

import styles from './excitingTitle.module.css'

const App = () =>{
    return (
        <div className={styles.excitingTitle}>
            <h1>Hello World</h1>
        </div>
    )
}

The name convention is to add the word .module at the end of the title to distinguish it among other CSS files.

3. CSS within the JS component: Styled Components

This is an innovative way to style elements since developers can create their custom CSS within the same React components.

You use it with libraries such as Aphrodite, JSS, Styletron, Emotion, and other ones, but the one I learned and applied it on a project is Styled Components.

Check my last small project, a calculator created in React on https://calculator-davidsalomondev.vercel.app/ and the source code is on https://github.com/DavidSalomonDev/calculator

Style components is a library that allows you to create CSS code as functions, using the benefits of inheritance from Sass and passing props to some property values.

import styled from 'styled-components'

const StyledTitle = style.div`
    background-color: #333;
    color: #eee;
    margin: 2rem;

    h1{
        font-family: 'Open Sans', sans-serif
        font-size: 4rem;
    }
`;

const App = () =>{
    <StyledDiv >
        <h1>Hello World</h1>
    </StyledTitle>
}

It's commonly used and you can identify what are the styles a component has.

4. A simple CSS library: Bootstrap or Tailwind

I didn't know that this way was the most used among React developers, and it was disappointing for me. I'm a person that likes to modify and have control of everything and know what's the origin of things.

Using a CSS library is reusing what another person already styled. It takes off a little bit of the originality your project should have, but the developers' opinion is this: Why are you going to complicate things that are already created?

That's a good point if you are going to work on small projects. So, simply, to style using this method, you only need to import the library and apply the classes stated in their documentation.

const App = () =>{
    return (
        <div className="mt-4 pt-2">
            <h1 className="text-5xl text-blue-700">Hello World</h1>
        </div>
    )
}

If you're not good at design and styling, I think you can use this method, or sometimes even though you are good at it, there's no time to create custom styles to deploy an application (overall in startups that need everything for yesterday).

Tell me, what's your favorite one?

  • Are you the one that likes to style everything?
  • Do you use CSS libraries?
  • Do you create separate components or is it everything in just one file?
  • In your opinion, Is there another framework or library better than React?

Tell me in the comments, I'd like to read at your thoughts and learn from them.