I was honestly thinking just this. Patience, perseverance, or whatever you want to call it is truly a keynote of this whole article.

Another thing...just because you give up doesn't necessarily mean you don't have the perseverance. It could just mean you haven't found the medium that best works for your learning style or mentality. I tried doing Udemy and youtube tutorials but I found that without some sort of structure like you would find in an actual school didn't work for me. So I went to an actual bootcamp, and even though I slowed my pace, I've yet to give up and don't intend to,

--

--

Thank you. I am def going to try this out. In the meantime, I have some suggestions for improvement to DRY up your code, which I incorporated.

You only need normalize, the other 4 functions literally do the same thing.

Here's my Typescript version of your solution:

--

--

I thought this as well, along with worries of separation of concerns. After messing with styled-components though, I gotta say. One, performance isn't that bad. Two, it really makes CSS a little more powerful.

You can easily mathematically apply sizes, conditionally set different rules, and such. In regular CSS, you'd have to come up with a style rule per condition and conditionally set class name with DOM manipulation.

CSS-In-JS also solves the problem of specificity that the doing the above could cause. It's also fairly similar to Angular Directives.

There's also no real learning curve, for vanilla styling. If you know CSS, then you can use CSS-In-JS just fine. It took me under a day to figure out the basics.

The cons of CSS-in-JS is that i can cause some bloat but that's solvable by separating in separate files.

--

--