Some people have no qualms with incorporating CSS and HTML into Javascript components. Some others are vehemently against it. There’s no clear-cut, agreed-upon way to style your front-end using React, so there’s no singular best practice, but there are definitely a few approaches that have emerged.
In-Line CSS
This is best if you have only a few components or a smaller one-page app. React actually prefers in-line CSS. It isn’t ideal for larger chunks of formatting since can be difficult to manage and end up looking messy. If you need to change one thing, you’d have to look through your code to locate the particular attribute. It’s also limiting in the sense that it becomes tedious to make overarching changes to your application.
One possibility is to store separate styles using variables, then include them as a reference in tags, like below.
Another way is to include the CSS directly in your tag – this is a more concise way and better if you only have one or two style properties to attribute to your components. For example, <p style=”color: pink”>.
CSS Stylesheets
This means you can have a separate file containing styling pertaining to each component of your application, so if you have a Shirt.js component, you’ll have an accompanying Shirt.css file. Then, you’d make sure to import your css file in your component file.
CSS Modules
“A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.” What makes a CSS module a “module” and not just a “file” is using a CSS compiler.
“CSS compilers intend to improve upon the default CSS syntax, allow you to write your stylesheets in a syntax more powerful, or more easily readable. CSS Modules compile to a low-level interchange format called ICSS or Interoperable CSS, but are written like normal CSS files.” – CSS Modules Github
If you’re using Webpack, you already have access to a compiler. All you have to do is create a file that corresponds with your component and contains all the styles relevant to that component. When naming, make sure names are simple, descriptive, and useful for only the elements in that component.
(Credit: http://andrewhfarmer.com/what-are-css-modules/)
No more global variables. It can sometimes be tough to figure out where a particular p tag is getting its styling from, especially when styling happens in multiple places and you aren’t sure which CSS tag is of highest rank. That’s where CSS modules come into play. You can have super simple class names, but build tools in CSS modules automatically add uniqueness to the original class name and export it to a Javascript object literal and apply it to React components.
When a compiler runs your CSS and gives your class name a modified unique global variable, it also generates a Javascript object that associates your original class name with the name it generated for you. When you import styles from ‘./Cat.css’ in the example below, “styles” is just a Javascript object.
Jil Krusemann 