Should we look into using CSS Modules?

[ReneDrie]

Personally I really love the CSS Modules that we can use within our Vue projects. For easy naming stuff (and not a lot of discussions about code style, BEM etc..) it would be awesome if we could integrate this into Muban as well.

Found out it is a bit harder to implement, but with PostCSS we could achieve this. Look at the module below: https://github.com/css-modules/postcss-modules

It would also probably require a HTML PostCSS module, but I think it could work and make it easier to use the CSS Modules. And with this we would have some more overlap within the 2 set-ups.

Downside would be that the HTML syntax for the CSS Modules would be a little bit different, but I think that would be manageable.

[pigeonfresh]

I love the features of CSS Modules and understand its benefits. I got one question/concern. What defines the hash that is needed to create an unique classname? If this is random(ish) it would result into different classnames in the built css, while the classname in the HTML is most likely copy-pasted in the template-engine of the CMS.

[ThaNarie]

When using that setup, it would mean the following:

• you would write your css using css-modules
• you would write your html with css-module="foo" instead of class="foo"
• the posthtml-css-modules would transform the html, creating the css-module classes from the css-module attributes.

The hash is generated based on the path of the file. So it will only change if the file would move or if a folder/file gets renamed. Which is something that could happen, and it will 'break' all the HTML that already is implemented on the server.

Also, the muban-convert-hbs module wouldn't work anymore, since the posthtml-css-modules only works on generated HTML, not in handlebars (or other template output).

So although I like the features of CSS Modules, it becomes too complicated or even unworkable in some cases.