Hacker News Reader

Comment by madeofpalk | Hacker News Reader

This looks like it was written by someone who hasn't really used a 'CSS in JS' approach. The complaints are actually non existent. Any CSS-in-JS approach is going to have a way to standardize styles across your application.

Regardless, I'm not a huge fan of these CSS-in-JS techniques anyway (although I don't mind Styled Components if I have to use it). CSS Modules, to me, is a far better approach and it sits there in the middleground between 'Pure CSS' and 'CSS-in-JS'

> OOCSS, SMACSS, BEM, ITCSS, and ECSS.

The beauty of CSS Modules is that it basically merges _naming conventions_ like BEM into CSS 'master'. You don't need a convention because the language just sorts it out for you.

Imagine arguing against variable scope in any other language with just saying "hey, just manually namespace your variables!"

View on HN

Glen Maddern who helped create CSS modules actually went on to help create Styled Components.

Here is a talk he did on his reasoning - https://www.youtube.com/watch?v=MT4D_DioYC8

IMO - Use the tools/tech that make you happy.

Exactly! The basic argument of people like the post author is "Learn CSS, so you don't write shitty CSS". And in an ideal world he's right and I agree with him, conceptually.

The problem is where that ideal meets reality. Few developers bother learning CSS in depth to avoid spaghetti and poor practices, so whether we like it or not - that is a fact and a reality we have to deal with.

That's solved by tooling and/or better languages and better abstractions - which is what css-in-js is aiming to do. Coding standards like naming conventions aren't enforceable enough to scale in real life :(.

This! I feel like everyone forgot about CSS Modules, while I think this is the cleanest and nicest solution to all CSS problems and doesn't make you cringe like CSSinJS or styled components and others.

CSS modules is pretty clean, but disagree that JSS/styled-components are "cringeworthy". They're very powerful, especially when combined with React component props - i.e. let's say when a component has a prop active, that when true we want to change the color on something. A traditional way to handle that would be by toggling some active class, however this creates coupling from the prop to a class, and then the style to that class as well. With styled-components, you can remove one step from that with the classes, one less thing to think about (the developer doesn't need to think what classes are needed with what props, and then what styles apply on those classes).

Reply on news.ycombinator.com