How did we end up with CSS-in-JS and why some developers don't like CSS

I recently read Why Most Developers Fear CSS and I decided to take the time and present some thoughts that I've accumulated during the past 4-5 years or so.

Most of the "Whys" people use to base their frustration with CSS are:

Browser incompatibilities

Claim
Browsers, mainly IE, were not aligned in the implementation of the CSS spec.

Reality
It still occasionally happens, but if you haven't done CSS in the years before 2014/2015 then you've seen nothing when it comes to hacks and tricks and bugs we had to solve to make things look descent. Have you done rounded corners using png's, 4 extra HTML elements and absolute positioning? No? Then you have no right to complain. Try to vertically align in the pre-flexbox era. The situation has dramatically improved, and with IE Edge adopting Webkit this question is closed for good.

Scope/Cascading/Inheritance

Claim
I changed this rule here and it broke something over there.

Solution

• Functional CSS ( https://tailwindcss.com/ or https://tachyons.io/ )
• Component based architecture with one (only one) parent selector that creates a scope for you

The real reasons some coders have issues with CSS are in my opinion a bit more complicated.

Ex-backend devs (PHP,Java,.NET) switched to Frontend because of the JS hype which started around 6 years ago. (slowly with Backbone, followed by Angular and shortly after with React)

These engineers were on average more proficient with handling logic/programming/algorithms, more-so than someone who was mainly doing HTML/CSS/jQuery throughout his career. They picked React as it is still the most popular JS framework out there.

But, they never got the time, will and hands on experience to learn CSS.

They regarded CSS as 'inferior', a necessary evil, 'it's not real programming' (maybe true, still doesn't mean it's easy to do) they just dive in, change a couple of lines here, a couple of lines there and pray it works. Spray and pray for CSS.

I've seen excellent programmers write the ugliest CSS I've seen in my life. Unneeded repetition, deeply nested selectors, magic numbers, little to no architecture etc.

A general low barrier of entry

CSS being a descriptive language, a set of rules and what not, feels easy. Anyone can do it. People jump in expecting to understand everything without any learning.

"This thing can't go exactly where I want it to go"? -> "position: absolute;"
"This rule isn't powerful enough"? -> "!important"

and so on and so forth.

Frameworks

CSS Frameworks even though they're super helpful tools, can't replace real hands on experience with Vanilla CSS. You may whip some Bootstrap modules together with a bit of a luck, but you won't go far. The moment you hit the first bump in implementation, you'll be like "oh this is so complicated, it's the language's fault".
UI Frameworks for React have similar results. You can make a webapp with Material UI for React easy peasy. But when you need to go custom?

Conclusion

The hate and confusion towards CSS and the possibility to do all web without really doing CSS led to patterns like CSS-in-JS and tools like Webflow. Most of the technical arguments against CSS-in-JS have already been debuckled by Chris Ferdinandi here.