Default way

Just a CSS

import "./index.css";
const App = () => (
    <div className="App">My app</div>
)
        

Pros

• Simple to read - just regular CSS
• Simple to use - just regular CSS
• No extra efforts - works out of the box

Cons - Conflicts

// App.css
.root { padding-top: 1em; }

// Card.css
.root { padding-top: 2em; }

// Result
.root { padding-top: ??; }

Cons - hard to reuse

.input:focus {
    outline: 1px solid brown;
}

.select:focus {
    outline: 1px solid brown;
}

Cons - hard to track not used code

.app {font-size: 2rem;}
.missing-class {color: red}
        

import "./index.css";
const App = () => <div className="app">
    My app
</div>

And others

Using CSS modules

Almost the same as CSS

import styles "./app.module.css";
const App = () => <div className={styles.root}>My app</div>
        

But scoped to the component

[filename]\_[classname]\_\_[hash]

import "./index.css";
const App = () => <div className="app">My app</div> 

            
My app
        

Result:

• No more conflicts with same naming
• Flat CSS without deep nesting
• No more !important
• Easy to track not used class

With css variables - it's almost perfect solution

 :root { --main-color: black; }
 body { var(--main-color, white) }

But if you need to support IE...

This will not work

Preprocessor

CSS with superpowers

SCSS - Pros

• Variables
• Convenient nesting
• Mixins
• Math

Pros - variables working in IE

$default-padding: 1em;
.app{
    padding: $default-padding;
}
.card {
    padding: $default-padding;
}

Pros - convenient nesting

.radio:disabled { opacity: 0.33; }
.radio:focus { outline: 1px solid red; }

.radio {
    &:disabled { opacity: 0.33; }
    &:focus { outline: 1px solid red; }
}

Pros - mixins

@mixin theme($theme: white, $txt: black) {
    background: $theme;
    color:$txt;
 }
 
 .card {
     @include theme;
 }

Pros - math

@use "sass:math";
article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

Cons

• Extra setup needed
• Learning curve
• Not compatible with pure CSS

CSS in JS

CSS in JS - modern and popular way to manage CSS in React

Example from styled components

import styled from "@emotion/styled";

const AppH1 = styled.h1`
    color: red;
`;

Pros

Absolute control

In CSS in JS approach - css is a part of your code. Thus you have full control on it. You can use variables, math, any kind of transformation. You can use props to control any css property

Naming

Within CSS in JS you will not spot naming issues. Class names are unique or not exists at all

Maintenance

As far as CSS turned into the code - it's much easier to track, rename or delete CSS without worrying that something will be broken

CSS in JS - cons

• One more weird syntax
• Extra tooling needed
• Some performance hit

Libraries

• Styled Components@5.3.5 - 36_000 ⭐, 3.5M downloads, 33.5kB
• emotion/react@11.9.0 - 15_000 ⭐, 3M downloads, 21.2kB size

Examples - styled components

Simple

import styled from "@emotion/styled";

const AppH1 = styled.h1`
    color: red;
`;

With props

const AppH1 = styled.h1<{ type: "regular" | "danger" }>`
    color: ${({ type }) ==> 
        (type === "regular" ? "black" : "red")};
`;    

Restyling existed components

const AppHeader = styled.h1<{ type: "regular" | "danger" }>`
    color: ${({ type }) => 
        (type === "regular" ? "black" : "red")};
`;
    
const FixSizeHeader = styled(AppHeader)`
    font-size: 10px;
`;    

Of course there are much more

Typical mistakes with CSS Modules

CSS Modules - not importing a module 💔

import styles from './app.css';

import styles from './app.module.css';

CSS Modules - using regular class 💔

const App = ()=> <div className="main"></div>

const App = ()=> <div className={styles.main}></div>