To what extent do you agree/disagree that CSS Modules are awesome and solve nearly all of CSS's problems?

[csswizardry]

Only slightly.

Let’s remove the specific tool (e.g. CSS Modules, Styled Components, etc.) and look at the general question of ‘do we need something that isn’t CSS to do what CSS used to do, only better?’

I’ve seen talks from prominent figures in the CSS-in-JS community, and I think that they definitely address real problems, and I’m glad that they’re working on solutions, but I’m still not sold. All of these solutions recreate CSS (only not quite as well) in languages that fewer people know (e.g. designers comfortable with CSS, but maybe less so with JS), to solve problems that can be solved with CSS alone.

• Naming collisions? Use a naming convention.
• Regressions? Implement better testing.
• Lack of scalability? Employ an architecture.
• Lack of encapsulation? Write better selectors?
• Subtree collisions? Learn about inheritance.

Do I think CSS-in-JS is bad in and of itself? Maybe not. But I do see it as a superficial patch over a larger problem, which is that your developers don’t know CSS, and nor do they want to learn it. They’d rather bend the paradigm to suit them so that they can keep things on their terms whilst eschewing responsibility.

So the problem then becomes ‘my team doesn’t really want to learn CSS properly, so should we use something else?’ which of course the only natural answer is ‘Errm, you need better trained developers.’ (This calls to mind a slightly different opinion I hold about so many people working on the web these days being from a traditional CompSci background, with none of the knowledge of the nuance or the history of the Web as a platform. The sheer number of developers who’re badass programmers but with no idea about HTML/CSS/progressive enhancement is kinda worrying.)

Now if you look at something like Web Components, this is where I get excited. A specced standard where designers/front-end developers can still continue in the language they’re most comfortable with (and, let’s not forget, the language that was purpose-built for this very task!), we get Shadow DOM encapsulation, we get collocation of code, we get componentisation.

I think CSS-in-JS is a bit of a hack to get around lack of front-end skills, and that whilst it may patch the issue on the surface, it’s indicative of a larger problem.

[josephrexme]

Considering that unlike styled-components, CSS modules still lets a designer write code in plain CSS within a .css file perhaps a JS developer could write the components and just add the needed classes leaving the CSS file for each component untouched.

Do you think this tackles the problem for designers somewhat? And if they're writing the CSS then they are very likely to understand enough of CSS as well.

I hope this gets seen since it's a closed issue.

[ror-y]

The more I think about Harry's answer, the more I think the solution presented by CSS Modules is not addressed.

This article, written by the creator of react-css-modules, highlights in detail the pitfalls and misconceptions of CSS-in-JS, much like the ones laid out by Harry in his answer.

However, these concerns aren't shared by CSS Modules. Consider the following solutions presented to the developer by CSS Modules:

• Automated prefixing (no need to use BEM). This is a massive time saver. • Usage of .css files over writing inline styles in .js files • Locally scoped CSS

In my opinion, CSS Modules has little to do with the CSS-in-JS issues highlighted by Harry in his answer.

[mxstbr]

CSS-in-JS is a bit of a hack to get around lack of front-end skills

I vehemently disagree with this. Calling folks like @markdalgleish, @geelen etc. lacking in frontend skills when they've been writing CSS for decades (like you!) is... just wrong.

I've been meaning to write a response to this for a while, but haven't come around to yet since I've got real work to do just like anybody else.

Thankfully, a few days ago @markdalgleish (one of the creators of CSS modules and self-proclaimed "CSS person") did a much better job than I could've to lay out the reasons why paying attention to what's happening in the CSS-in-JS space is a good idea, so I'll just link his post here: https://medium.com/@markdalgleish/a-unified-styling-language-d0c208de2660

And to specifically point out why styled-components exists (and why it's actually made for people who love CSS) watch @geelen's (the other creator of CSS modules) talk from CSSConfEU this year: https://www.youtube.com/watch?v=MT4D_DioYC8

These two resources do a much better job of outlining why at least paying attention to the things that are happening in this space is good idea. (spoiler alert: it's got nothing do to with lacking frontend skills)

I'd be interested to hear what you think after reading/listening to these two resources

[josephrexme]

I read that @mxstbr and it made me see the importance of styled-components, glamorous, and styletron. I believe @csswizardry just needs to take a closer look at these things. Perhaps your links could be of great help