Ξ

Comments on the CSS global namespace

Published on 2017-02-05

Recently I heard a lot about the "global CSS namespace" and how aweful it is. A new project called CSS-modules set out to fix it. I don't belive the hype.

So what seems to be the problem? People argue that all CSS selectors operate in a global namespace, which is known to be bad in other areas of software engenieering. There is certainly some truth to that. It is hard to avoid naming conflicts, especially in large projects with many third party components.

Of course, you can always avoid naming conflicts by manually prefixing all classnames. Instead of .active you simply use .button-active and everything is fine. As far as I understand, CSS-modules does little more than automating this. In order to work properly, it needs to be integrated into the templating system. This is, in my opinion, quite a lot of work for little gain.

More importantly, I feel that the concept of "everything is global" is misleading. I would argue that everything in CSS is public, as it would not make sense to have private CSS that is only used by other CSS code. The opposite of global is local, but local to what exactly? I think this is the key to understanding CSS-modules: The answer is most likely local to components.

CSS-modules proposes a fundamental shift in web architecture. Instead of structuring by HTML/CSS/JavaScript, it proposes to structure by component first. This may actually be a good idea, at least for some projects. But even if this idea sticks, I highly doubt that CSS-modules itself will.