Ah, the world of web development - where you start by learning the fundamentals like HTML, JavaScript, and of course, CSS.
But once you're out there in the real world building apps, plain CSS just doesn't cut it anymore.
The struggle is real.
So today we'll dive into seven different ways to write CSS for a React app using NextJS (don't worry if that's not your jam; these concepts apply elsewhere too).
Buckle up and get ready for some trade-offs!
1. Global CSS: Old School Cool
We could create global CSS that applies to our entire application.
It works... but only when things are small and simple.
As your project grows, naming things gets harder because of how cascading stylesheets are.
You might find yourself following a naming convention like BEM (Block Element Modifier), but let's be honest - no one enjoys doing that perfectly.
And don’t forget about loading times! A larger bundle size equals slower app loads – ain’t nobody got time for that.
2. Modularizing: Divide & Conquer
NextJS comes with built-in support for CSS Modules which allows you to scope your styles locally in individual components without worrying about name collisions or messing up other parts of the codebase.
As an added bonus, this helps reduce bundle sizes since NextJS knows exactly what styles each component needs.
Pro tip: You can even use composes property from another module if sharing between multiple components is needed!
3. Preprocessors: Sassier Stylesheets
Why stick with plain ol' vanilla when we have preprocessors like SCSS, Less, and Stylus?
These bad boys let you write CSS with more advanced features like variables, mixins and functions.
Feeling sassy yet?
All you need is to install the Sass compiler in NextJS and change your file names accordingly.
The rest happens magically behind the scenes.
4. Styled JSX: JavaScript + CSS = ❤️
Enter a whole new world of styling components with utility libraries such as styled Components, emotion, JSS Style Tron (the list goes on!).
They all share one thing in common - writing CSS directly in your JavaScript code!
Styled JSX comes built-in with NextJS; just open a style tag inside a component using the jsx attribute.
Now you can dynamically change styles based on state changes - how cool is that?
5. Utility Classes: Tailwind & Windy for Breezy Styling
Why not make our lives easier by importing utility class libraries like Tailwind or WindiCSS?
Get ready for rapid UI development backed by IDE IntelliSense—no more worrying about unused classes too since they’ll be purged automatically!
Keep in mind that this approach might require some extra tooling setup upfront and could lead to messy component HTML code if not organized properly.
6. Prebuilt Component Libraries: Bootstrap & Bulma
Or maybe you prefer prebuilt components from popular frameworks like Bootstrap or Bulma?
These give you ready-to-use styles for buttons, cards etc.—just import them into your project from Node modules!
The downside? Not much customization here compared to Tailwind plus possibly larger bundle sizes due to unused classes.
7. React Component Libraries: The Opinionated Bunch
If you're all about component libraries, check out options like Mantine, ant, Material UI, Rebase, Chakra and Tomagui!
These not only handle your CSS but also offer a wide range of utilities for JavaScript too (think hooks & APIs).
Remember that these libraries can be opinionated in their design choices so pick one that suits your taste!
Your choice here will shape the look and feel of your app.
And there you have it - seven different ways to tackle CSS in React! Mix and match these techniques as needed or just stick with what works best for you.
Follow me on twitter, I post daily there: johnrushx
Happy coding! 🚀
- thx to fireship for his vid, most of it is takes from there
P.S.
Why did the web developer leave the restaurant? Because of the table layout!
Top comments (2)
if you like this articles, check out my other articles)
As a beginner in React, this was indeed very helpful. Thanks!