React - component for every styled element?

Question

I'm learning React.

It seems React highly promotes composition. Create React App even advises against reuse of css class.

Let's say I have a container, which is a white box, with nice rounded corner and shadow, etc. It can contain anything. That's it. No logic. Not much html except a <div>

Traditionally, I would just create a global css class named .white-box and then apply it to any <div> that I want it to be this white box.

I know in React you can do this, too. You can do whatever you want. But what is the general practice? From what I found online, it seems I should create a component for it and put any children inside:

<WhiteBox> <div>anything</div> </WhiteBox>

Isn't it overkill? What are the benefits of doing this? Should I create a component for everything that can be re-used, even when it is such a small thing?

Answer 1

This is honestly a matter of personal preference and experience.

For example, the seemingly pragmatic way would be to use a .white-box class on a div; it's super easy and requires no imports!

A bit later down the line, you decide that every white box inside some other control needs a bit more shadow, so you go and add a CSS rule for .some-component .white-box, and bam, now you got a shadow'ier white box without messing with the original CSS class. Nice and easy!

The problem with that is that when you do it once or twice, it's fine. But you'll soon develop a habit for "patching" the class name rules for specific purposes, and before you know it you're mixing rules without knowing it yourself, which is exactly what it says on the tin: Cascading Style Sheets.

I've been there myself, and it's no fun to maintain. Now I create components for everything, even things as simple as a white box. The trick is to name them right; you wouldn't call it WhiteBox because if you change the color of the box down the line, the rest of your code is a lie. ;) Instead, call it something like ContentBox; something that describes it's purpose, not what it looks like. Then use props to determine what characteristics the box should have:

<ContentBox shadow padded rounded>Awesome</ContentBox>

I'm personally a big fan of CSS Modules because they make sure that class rules never clash which avoids the issue outlined above entirely. Instead, if you want a class to inherit some styles from another, CSS Modules lets you compose them together.

Example CSS modules file:

.root {
  background-color: #fff;
}

And a React component:

import React from 'react'
import styles from './ContentBox.css'

export default function ContentBox({ children }) {
  return (
    <div className={styles.root}>{children}</div>
  )
}

The actual classname being used is actually something like ContentBox__root_abcd123random so even if you have another CSS file with the same .root class, the rules never clash.

---

An added bonus of doing it this way is that your components are now portable to other projects because it only depends on styling within the CSS file that ships with the component. I've enjoyed great reuse using this strategy across many internal web apps at our company.