BEM!

How I organize CSS for React.js

Is your CSS for your React project jumbled into one index.css file with no structure? Do you have a bunch of old CSS modifiers and aren’t sure if they’re being used?

In other words, is your CSS a mess and you need a way of organizing CSS for React? Look no further! Here is my system for organizing React CSS.

I’m not really an expert, but after watching some Youtube videos of other experienced React developers and reading up on BEM, these are a few tips I’ve picked up.

Always use classNames

Firstly, use classNames to modify ALL your components instead of ids because of the nature of React.

For some time, I was using both ids and classNames because I knew some components I would only use once and others I would use multiple times. While this logic makes sense when writing normal HTML elements, React is all about creating reusable components. Therefore, it makes sense with React to ALWAYS use classNames in your component definition whether or not they will be used once or twice.

Honestly, it doesn’t really matter too much whether or not you use id’s or classNames, but personally, I think using classNames makes more sense with what React components are. Also, it looks a lot cleaner because of the consistency.

BEM

BEM (Block, Element, Modifier) is a popular naming convention for CSS modifiers. It gives your elements’ className context and association.

Check out my old component without BEM.

And with BEM.

Isn’t it easier to understand what an element is just by its className? This will be more apparent when working with CSS.

What is BEM?

The way BEM classifies CSS is a Block and its Elements (also Modifiers, but I’ll just talk about Blocks and Elements). Read more about BEM.

The block is a component at some level of abstraction, and its elements are smaller parts that make up the block. For example, if you have a bunch of baseball cards, one way you can look at it is each baseball card is a block. Elements within that block would be the player’s name, his stats, etc…

In CSS it looks like this: (Elements are defined with syntax: blockName__element.)

If you created a React component for a PlayerCard ‘block’.

Note***: Make your classNames consistent and predictable by making the className for the outer div in any component the same name as the component name!! Having predictable and consistent naming makes it easier to find and work with CSS.

For nested components, just use the name of the top-level block. You don’t need to specify each element it’s nested inside.

So for the Hand example:

Separate CSS files

One last thing, create a separate CSS file for each React component.

1. Keeping separate CSS will make it much easier to find the CSS you’re looking for.
2. It’s also easier to keep smaller CSS files organized and current.
3. Quicker to navigate to CSS file because Name.css will be right next to Name.js. This is better than trying to find index.css each time you want to modify a component.

It may seem like a bunch of work, creating and importing separate CSS files for each component, esp. when you have a lot of components, but it makes working with CSS a LOT easier.

For me, adding to a big project is much easier when my code is organized and structured, and these three tips have helped me keep my CSS clean and manageable.

Thanks for reading, I hope you found this article helpful! :)