DEV Community

Cover image for When CSS Beat Javascript

When CSS Beat Javascript

Arit Developer on February 17, 2020

Enjoy content similar to this post on my blog Arit, Developer! Subscribe to my newsletter to receive quasi-monthly emails whenever I publish a ne...
Collapse
 
pclundaahl profile image
Patrick Charles-Lundaahl

Yes! This is wonderful.

I'm always amazed at how many people default to JavaScript when CSS would solve the problem simpler, in less code, and with fewer demands on their users' bandwidth, CPU, and battery life.

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

On the opposite end of the spectrum are people who are vehemently opposed to touching JavaScript, even when it's the right tool for the job, and insist on writing hundreds of lines of obscure CSS :D

Collapse
 
pclundaahl profile image
Patrick Charles-Lundaahl

Fair point!

I don't recall ever having seen this in the wild, but I'm sure it must be out there (and I suppose really, I know far more skilled JavaScript programmers than those who are skilled in CSS, so my bubble is obviously pretty biased).

Thread Thread
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

You'll often encounter it on Codepen, and it's usually done tongue-in-cheek to show off how far you can get with CSS alone. I haven't personally encountered devs who are actually obstinate about using CSS over JS.

Collapse
 
craigmc08 profile image
Craig McIlwrath

That's a neat trick! But, the two code snippets are the same, we can't see the js solution.

Collapse
 
benjaminlewandowski profile image
Benjamin Lewandowski • Edited

The css solution also shows the js solution. But only in the app, maybe it's an bug…

Collapse
 
aritdeveloper profile image
Arit Developer

Hmmm that's strange! I'm seeing it render normally on desktop and mobile. Perhaps I'll flag it for the dev team.

Thread Thread
 
facundocorradini profile image
Facundo Corradini • Edited

I can confirm the bug. Weirdly enough, it looked OK the first time I read it (JS snippet first, CSS solution later), but now I'm seeing them in inverse order :s

There might be something wrong with the handling of gist on DEV...

Collapse
 
aritdeveloper profile image
Arit Developer • Edited

Hello! There's actually no JS solution, there's the original JS implementation, and then my implementation using CSS 😄

Collapse
 
michael12lv profile image
Info Comment hidden by post author - thread only accessible via permalink
Michael12lv • Edited

Hello! I want to thank grademiners.com/. Thought that I was expelled from the university, said goodbye to the diploma. But then I found a way out of the situation, on Google sites that write abstracts on order, and decided to order a scientific paper. They wrote great! I confirmed my work and got a diploma! Thanks guys.

Collapse
 
marflage profile image
Marflage

The code snippets are in reverse order. The first is CSS and the second is JS, where as it should be the opposite

Some comments have been hidden by the post's author - find out more