CSS is clearly a never ending rabbit hole that could yield months and month of nuggets of wisdom. Being able to quickly prototype sites and improve the visuals and UI makes me want to continue working on the project for hours and hours because I can SEE it coming together. It is also very satisfying to be working with other developers and feel like a real contributor and helping others in the team see the results coming in. No better feeling.
This past week that desired for CSS superiority led me to CSS modules as a part of a deep dive ReactJS class I am doing on Udemy. If you haven’t checked it out I sincerely hope you take a look at it. It’s awesome.
I’m not the first person to write about CSS modules, and there are some great resources out there if you are looking to check it out. I’ll use this article as an intro to what they are and why they might be helpful in your next React project, and a little bit about how I used them in a recent project.
A Brief Description of What CSS Modules Is =>
Straight from the CSS Modules Repo:
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
Now how does this look in the App? Basically you create a file for each of your components and inside of that file you have the JS component Something.js and the CSS Module file that goes with it something.module.css . We will import the classes from this style sheet which will give us access to style our ReactJS component from inside the same folder. It looks likes this import classes from './something.module.css.
Since the two files are linked we can now set className on any of our JSX elements like so: <div className={classes.yourClassNameHere}>Hey how are you? <div> When the component is rendered CSS Modules will assign it a unique class name in the HTML and CSS effectively eliminating the need for completely unique class names across the entire application. Have a header class in the Toolbar AND FeaturedPost component, but the styles aren’t the same? No problem CSS modules keeps them scoped to the components in the same folder as the component itself.
How does this change the file structure of our app?
A little bit and it can get a little tedious when you are importing components since there is an extra layer of folders for each of your components now. Is it a little annoying? Sure maybe a little, but there are a few reasons why I’m willing to deal with it and I cover them below.
Automatic Organization of My CSS
One of the hardest things for me to keep track of with CSS is where all my selectors are for a given component. Sometimes I work on components one at a time, but ( generally towards the deadline for the app ) I am adding CSS to a lot of different places in quick succession. CSS modules automatically keeps all of my CSS for a given component in one place and it is easy to find again when you need to change something. You also don’t have to worry about something being over written unless you are using an ID in two places which as I’m sure you all know is forbidden.
Easy to Get Other Devs Up to Speed
Very few projects remain a one dev team for very long and in a professional setting this never happens. Other people can pick up on the file structure and find CSS for a given component with no issue. If working on a team and changes are made to the CSS it’s easy to track them and find out where changes were made making code reviews easy and fast.
Add Some Sass
Sass stands for Syntactically Awesome Stylesheets and it is a CSS preprocessor that adds some awesome functionality to your stylesheets making updates and changes a lot easier.
Sass files are written in .scss file and will be automatically converted to CSS when it is compiled and rendered to the HTML DOM.
In practice, you can create variables that are shared among all of your components through an import of a file. For Example, let’s say the design team gives you some hex code colors to use in certain places around the app. Instead of going to each element’s styling and adding them one at a time you can create a variables.scss file, assign your colors ( let’s say main and secondary ) then use them where you need them using the dollar-sign syntax. $main-color for instance could hold your primary color for the app. Now let’s say the color is changed for some reason. You change the one declaration in the variables file and that styling is sent to all the places where you use the variable.
CSS Modules doesn’t make Sass perform any differently than if you used it without CSS Modules, but having your color palette in one place and being able to share it among all of your components makes things really simple. I’ll do a blog about this next week and link it when I’ve finished.
CSS Modules has really helped me keep my styling organized and allows users to add CSS only to the pieces they need without having to worry about creating a naming convention for their classes that are going to be shared around the application. I suggest you check out the repo on GitHub and watch a few tutorials to see how this might help take your styling to the next level.
Happy Hacking,
Resources:
https://programmingwithmosh.com/react/css-modules-react/
A few of my Links:
If you’d like to connect and talk about development please send me a LinkedIn request I’m happy to chat!
