There are many different ways to provide styling for React components, such as importing plain CSS, using styled components, JS-in-CSS or CSS Modules. These all have various advantages and disadvantages. In this article I go through some considerations when using CSS Modules. Specifically I am interested in looking at this in a framework agnostic way. By Max Rohde.
To me, it seems CSS Modules provide the best solution overall for beginner to intermediate use. We can use the standard CSS syntax, which allows for effective copy and paste programming, and we can be assured of good client-side performance.
The article main parts:
- CSS modules basics
- CSS modules intelliSense
- Compile CSS modules
- CSS modules for server-side rendering (Node.js)
- CSS modules for client-side bundling
The easiest way to use CSS modules is to make us of the support provided in frameworks, such as Next.js or Create React App. However, there is a lot of implicit complexity in CSS modules that can lead to unexpected behaviour and bugs. Author tried to demonstrate that we can achieve anything we need with relatively few lines of code. The three libraries I provide are all very simple and consist of a single, short source file: node-css-require, esbuild-css-modules-server-plugin, esbuild-css-modules-client-plugin. Good read!
[Read More]