Diving Into CSS Modules

Isolate Your Code in Style

What are CSS Modules?

Just the name is already intriguing and sparks interest, doesn’t it? But what are CSS modules really? They are CSS files, in which all classes and animations are locally scoped by default.

But, Why Using CSS Modules?

So Where do I Use CSS Modules?

You can use CSS modules just about anywhere you need to isolate and modularize your stiles so they do not cross each other.

CSS Modules and Shadow DOM

Shadow DOM is a scoped subtree inside your actual page, that is hidden from the rest of your application. Just like iframes, shadow DOM elements are not accessible from the outside, so globally loaded CSS does not affect the elements inside the shadow DOM unless you want it to.

How to Compile CSS Modules

CSS modules are a nifty little feature but how does everything play together? After all, CSS modules are not a part of the official specifications and thus are not implemented in browsers.

A Simple Example

Compiling CSS modules requires an additional step in your building process. I’ll assume that you are just starting with the building process and guide you through each step to build your very first building pipeline. If you already have a project set up, you might still benefit from the below steps.

1. Initialize your project

The first step is always initializing your new project. You need a package.json file. Initialising can be a one-liner. Run one of the following lines:

npm init
yarn init

2. Install Snowpack

We will use Snowpack as our module bundler. It is a relatively new tool that should make building your code much easier and quicker. And it delivers on that promise.

npm install --save-dev snowpack
yarn add --dev snowpack
yarn run snowpack dev
"scripts": {
"start": "snowpack dev",
"build": "snowpack build"
}
yarn start; // to start the development server
yarn build; // to build your code for production

3. Configure your project

We actually do not need to do much configuration since snowpack supports CSS modules out of the box. Neat, eh?

4. The finished code

We will keep the code as simple as possible to avoid any confusion. After all, we are only talking about CSS modules, the other stuff comes into separate articles. Let´s create three files, index.html, index.js, and cssmodulesexample.module.css:

5. The result

The result is the prettiest website you have ever seen:

Conclusion

In this article, we learned what CSS modules are and how you could use them to make your codebase more stable and organized. They are a great way to avoid CSS overlaps and can easily be applied anywhere as long as you use a module bundler.

Other Resources

here are some references to the things we talked about in this article but did not discuss in detail. I highly recommend reading the below-linked articles since they explain a lot of the technologies that are or will become common in web development.

Developer, writer and a pure genious ... I may have exagerated a little ... have a look: https://ziga-petek.medium.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store