I long hesitated to comment on the “CSS Modules” tool, but seeing an article on CSS-Tricks about it, in it some fundamentally flawed assumptions and arguments, I want to shortly add some thoughts to it.

CSS Modules takes a different approach. Instead of writing plain HTML, we need to write all of our markup in a JavaScript file, like index.js.

This is the first and main issue I have with the whole approach: We now shift CSS, a language that is somehow failsafe and its files (.css-files) which get some special treatment by the browser during a pageload, towards JavaScript. All that while we know that JavaScript is loaded and parsed in a completely different way by the browser and is not failsafe but, as I tend to say, ‘safe to fail’. The HTTP network and it’s companion HTTPS are designed to fetch HTML, CSS, JavaScript and other asset files separately. It’s designed for performance and now we take that and by serving CSS through JavaScript intentionally slow down the browser’s capability. And then, polluting the UI thread with so many operations through a single point, we complain about our browsers being slow.

You might argument now, that CSS Modules can do this in a pre-processor step and compile the generated classes and styles as HTML, CSS. While that is true, in that case you gained nothing. You will be forced to use generic, ‘unstyled’ HTML elements that do not easily inherit any styles, such as <div> or <span>. But even with such elements, CSS still has the global scoping as it was built that way. You cannot escape the cascade if you use .css files and HTML markup. You can only try to limit its behavior.

But let’s go on with a list of questions raised in the article as to what the technique can solve. In here lie the biggest problems in web development I see these days.

Have you ever been tempted by a lack of time or resources to simply write CSS as quickly as possible, without considering what else you might affect?

This is probably one of the worst statements to advertise a technique that I saw revently. This basically says: Don’t care what you do, you even do not need to understand the basics of web development. Use this technique and everything will be okay. And it’s okay because you have no time to do it properly. It’s like saying: Hey plumber, here’s the trick: You have no time? Then just use some duck tape to connect my toilet to the drain pipe. It’ll be okay.

Have you ever run across styles that you weren't entirely sure what they did or if they were even being used?

Here I fail to understand how CSS Modules should help. They don’t add any value. You can still write them and forget to remove, you still don’t need to document anything on them. In fact, if some part of it is missing, chances are even lower to retrace what a style had been thought for.

This approach is designed to fix the problem of the global scope in CSS. (…) With CSS Modules, and the concept of local scope by default, this problem is avoided. You're always forced to think about the consequences as you write styles.

No it’s not. Please read the specification on the cascade to understand how CSS works. You can’t fix it if you still use it. Imagine the cascade as something that is hard-wired into CSS. And it is so by purpose. If you tell me something about “fixing … the cascade” you have not understood CSS—defined as ‘Cascading Style Sheet’. The only way out would be Web Components with its very own Cascade Root.

In the projects I’ve done, I came around a lot of challenges. A lot of them had to do with the Cascade of stylesheets. And I acknowledge the fact, that this is hard to understand or that sometimes it’s not easy to find the proper solution. But overall, I think the Cascade with its feature to inherit things from parents is the biggest advantage of CSS.

In the 10 years I write front-end code, I once had to write code where I really wished to avoid the cascade. During that project, I thought a lot about the cascade—actually more than I ever did before and more than I wanted to. But I realized that the only type of project where one wants to avoid the cascade is a third party component that has needs to have its own style and is not injected in an iframe. That will be possible by using web components in the future.

For everything else, I can only advise: Learn the cascade, use it and write smarter CSS code that inherits as much as possible from its parents. Don’t shift away your responsibility as a developer.