ReactJS | Modular CSS

Hi, I’ll demonstrate a short snippet of how to write modular CSS in React. In my opinion, and as far as I know, I think going the modular approach to styling your react components is the best, especially when you are relying on a front-end library (MDL, Bootstrap, Materialize etc…). It also saves the day if you are trying to leverage on components (styled HTML tags) of ready made HTML templates.

Modular CSS is simply a way of writing your styles and exporting them as JS modules.

Here’s one interesting advantage I have found.

HTML “ids” and “react components” are not close friends. Although, I have not taken time to master the cause of this misbehavior, I can only assume it (HTML id attributes) clashes constantly with ReactJS “id” props. Meanwhile, because I hate to imagine that my code breaks as a result of some CSS malfunction, I looked everywhere online for a solution that will have me avoid seeing “HTML id attributes” in my React components.

In other words, I sorta h*te CSS!…

That said, let’s get into some real lesson on how to style your react components by writing modular CSS.
I’ll assume you are able to create a simple React component.

When you think of Modular CSS in ReactJS, think of inline styling in your regular HTML code, errrmm… but not exactly what you may be thinking. 
Let’s get clarity, see the listing below.


import React from 'react';
class Hello extends React.Component{
render(){
return(
<div className="breadcrumb" >
<p>Hello World</p>
</div>
);
}
}

Note: We are not really styling some real div, all I am illustrating is how you write modular CSS in your ReactJS component.

“breadcrumb” is a bootstrap class and as soon as you render your component in your index.html, the styles for breadcrumb is applied to the corresponding <div>. Also, you should have included the bootstrap cdn in your HTML. [Just in case you don’t know what that is, look here].


Modular CSS in ReactJS

First we’ll create a new JS file in the same directory to hold our styles.

touch Hello.css.js

Inside Hello.css.js

export default {
styleOne:{
width: "50%",
marginTop: "15px"
}
}

See… You are simply exporting JS modules and importing in your React Component. Here’s how you do that.

import React from 'react';
import styles from './Hello.css.js'; // Import your css styles
class Hello extends React.Component{
render(){
return(
<div style={styles.styleOne} className="breadcrumb">
<p>Hello World</p>
</div>
);
}
}

We have made two changes to the code above.

  1. We imported our JS module “Hello.css.js” as “style” in line
  2. We included the style in our <div> tag. Just like we would style inline.

Cool yh? I found it super cool. Saves me lot of headache.

See the magic React performs.

// Here is what react renders in the dom.
<div style="width:50%"></div>
React renders the element inline and acts as though nothing special has happened.

Also, you can add more than one style in your module. Just include it as another object in you “Hello.css.js” file. Like this…

//Hello.css.js
export default {
styleOne:{
width: "50%",
marginTop: "15px"
},
styleTwo:{
overflow:"hidden",
}
}
// Go ahead and use the style in your React Component
<div style={styles.styleTwo}></div>
// It's that simple.

You can also include the style in your render component as a constant…. like this…

// Updated code
import React from 'react';
import styles from './Hello.css.js';
class Hello extends React.Component{
render(){
const styleOne = { // edit
width: "50%",
marginTop: "15px"
}
     return(
<div style={styles.styleOne} className="breadcrumb">
<p>Hello World</p>
</div>
);
}
}

That right there is considered a bad practice. Imagine that you have to style more than one component, your code will be screwed plus chances are you’ll fail the code review test on SIDECI (Yeah a platform that reviews your tea,code. Never tried it tho…)

Final words…
- You’d notice that my style attributes are camel cased. Yeah, that’s the difference. You’ll need to get comfortable with that if you are not. Btw, I love camel casing.

{
    width: "50%",  // commas exist here
marginTop: "15px"
}
//not
{
    width: "50%" // no commas here | This is wrong
margin-top: "15%"
}
  • Notice the comma. CSS modules are more like Javascript objects so, you could as well think of them as such.

I really hope this helps!.

Like a friend always like to say…

“Be great, be awesome and do you every single day”

PS:

I just found the second season of "Billions". It's dope!
Like what you read? Give Daniel Osineye a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.