Hi guys, so I just discovered that we could add CSS directly inline or in objects that we add to our elements and also having the CSS in between <style> tags in the component.
However so far I was just importing a .css file, so I was wondering is there is like a “line of conduct” on how to implement CSS with react app?
Thanks!
Inline styles are not a React thing, they’re an HTML thing, and exactly the same caveats apply. Avoid using them apart from for dynamic CSS values that you need to have applied or adjusted by JS (for example values for the exact screen width and height). Inline styles are extremely useful for this purpose, but not for general styling.
So, in increasing order of complexity (note I’m not saying any one of these approaches are better than any other, they’re different ways to approach the same problem):
Just a CSS file and className properties is fine, but the main issue here is that you get all the downsides of CSS. The main one is that you’re going to need classes defined for everything, then those classes need properties defined in your CSS file, which normally gets big and unwieldy.
The next simplest thing is to use CSS in modular way. With this, you can write small CSS files and import them into components. So you have eg App.js, and you’ll maybe write alongside it an App.css (though it can be named anything) with the styles you use for the App component, and in App.js you import "./App.css" (though you could import the CSS into any react component). This magic is enabled via a plugin to the module bundler that packages the app. So for example Webpack (which Create React App is built on) uses small plugin programs called loaders to deal with different kinds of files, and it has a CSS loader for this purpose.
It’s doing exactly the same thing as if you wrote it all in one CSS file, because what the module bundler does is look for those CSS imports, grabs all the individual files, glues them all together and then spits a single CSS file out the other end.
Going further than that, you can use CSS modules. These are the same as above, but they have to be named the same as the component they relate to, and what the bundler does is attaches a random string of characters onto each class name so that any styles are now specifically scoped to the component they relate to.
Again, Webpack (or whatever bundler + plugin is used) will just find all these CSS module files and join them all together in the final built app.
The next level up from that is CSS-in-JS libraries. These let you write the CSS rules directly in JS. Often the way it’s written looks quite like inline styles, but it is important to note that they don’t produce inline styles. The rules will either be extracted by a bundler and used to build a CSS file at build time, or they will be extracted and written to a style tag in the head of index.html at runtime. The two most popular libraries:
https://emotion.sh/docs/introduction
Technically, the CSS-in-JS libraries are by far the most complex solution, but they tend to be very nice to use, because you kinda deal with everything in the same React-ey way, at a component level.
As with all these things, it’s a trade-off. Just having a CSS file is going to be the simplest and [as long as you’re sensible] the most performant solution, but it also becomes a huge pita pretty quickly. CSS-in-JS adds dependencies and another API and there are two or three competing major libraries and there are weirdnesses and you can lose some useful CSS cascade stuff. But they’re very developer-friendly, very nice to use.
4 Likes
Wahou, as usual your answers are amazing! Thanks for the clarity of the post!
1 Like