loading...

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

katsanos_george profile image George Katsanos Updated on ・3 min read

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

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.

Discussion

markdown guide
 

CSS Frameworks even though they're super helpful tools, can't replace real hands on experience with Vanilla CSS

YES! I always push new devs to work WITHOUT bootstrap. Learn how to do it all yourself before you use tools to make your life easier.

 

The problem there is if you do get good at doing CSS all yourself, you'll realise that bootstrap doesn't make your life easier.

 

Agreed. I personally hate Bootstrap. Find it very redundant now that flexbox is so well supported.

 

Ex-backend devs (PHP,Java,.NET) switched to Frontend because of the JS hype

This point hits close to my heart, especially the bit about regarding CSS as inferior when there's such a huge skill cap when it comes to CSS. Watching people doing speed css coding vs. watching people with little to no css experience is crazy.

It doesn't take a huge amount of work to get familiar enough with CSS to be able to build decent modules/components/apps, but this level seems to be just past the backend devs who 'spray and pray' as you put haha.

 

Browser incompatibilities closed for good? If only. Webkit/Blink and Gecko both have their fair share of incompatible bugs.