DEV Community

manushifva
manushifva

Posted on

Why Many Web Developers Are Obsessed With CSS-Only Things?

I have seen so many CSS-only things, and it's seems so many web developers who like it so much. I know JavaScript can be disabled, but people who do it only 2% from internet population. Even if our visitors disable JavaScript, we can simply put a <noscript> that tell user to turn on their JavaScript. CSS-only file-size things also usually 2-3x or more larger than same thing that code in JavaScript.

I don't know why, maybe anyone can explain?

Top comments (7)

Collapse
 
ben profile image
Ben Halpern

There are definitely different camps on this issue. Some folks will consider there to be a purism in the web working without JS. Others have an idealism around progressive enhancement. Some folks might be hardcore "the web is for documents!" folks.

There are a lot of different perspectives here, but on some level the argument is rooted in an era where way more people couldn't/didn't have JS enabled.

For myself, I'm generally in favor of progressive enhancement where possible, but don't have much of a purist opinion on any of this stuff.

Collapse
 
jayjeckel profile image
Jay Jeckel • Edited

Even if our visitors disable JavaScript, we can simply put a <noscript> that tell user to turn on their JavaScript.

Someone who has turned off javascript isn't going to turn it back on to use your site; they're going to close your site and go to a site where they put in the effort to do things right by supporting both those with javascript and those without.

Collapse
 
zakirsajib profile image
Zakir Sajib

in 2011, i was working in newspaper media as a web developer, i had to built a event plugin in wordpress platform. Whole thing was built in js and little bit CSS ofcourse. so if no js in browser then no events calendar are shown. My Team lead shouted in front of all my colleagues why I did I build that in only js. No I didn't lose the job, but he embarrassed me. And I couldn't fix it to allow only css based solution, it requires js to show up events calendar and data using json. I didn't know!

Anyways lesson learnt: Use JS only required, think your audience, our audience mostly elder people who might have older machine, and may be js was disabled or outdated. We can't tell them use latest browser and enable or update js or whatever, simply we don't have any control on their machine.

So never use JS for critical data to show up, use JS only for if really needed or animation or interaction (Critical data shouldn't be hidden just because you use JS).

He was right and I was wrong, In 2011, I was not bothered about elder people. Now I think twice before i touch my hands on keyboard.

Collapse
 
philliprichdale profile image
Phillip Richdale

Well, that's easy to answer:

Going CSS only pushes all executed logic to the rendering engine of the client/browser. It's an exercise in minimalism, it pushes the boundaries of what can be done and it encourages webdevs to get familiar with the newest available features of CSS (Which these days is quite a challenge, as everyone who's been around since the dawn of the web can attest).

All that is fun and a good thing.

No need to lugg around JS logic for mere UI stuff if that is available with the means of the visual composer/renderer. Advanced SVG features such as transformations and animations are good for such things as well. If your requirements only go back as far as Blink, Quantum and Safari from 3-4 years ago, you can do 95%+ of modern fancy GUI stuff without a single line of JS.

That's the challenging and fun thing about attempting "HTML/CSS/SVG only".

Collapse
 
ingosteinke profile image
Ingo Steinke • Edited

Have a look at this rant about GarbageScript, then consider having the alternative to write at least some part of your code in slightly less ugly language (CSS).

Despite its inconsistency and idiosyncrasies, at least CSS is descriptive and more forgiving / backward-compatible than JavaScript. JS will stop at the first runtime error, but "error" could just mean the client's old browser doesn't understand the modern function you wanted to use. So to be cross browser compatible, people started to use Babel to compile their modern ECMAScript code to some barely readable 20-years-ago-version that could still break on any minor bug.

Using HTML and CSS with progressive enhancement, you can design and build a modern 2022 site that still works in Internet Explorer or an a very old iPhone.

Collapse
 
mwdd profile image
Mark Wilson

I'm not a purist about it but my brain works in the following order of importance even when using a JS framework when considering what is output to the browser:

  1. HTML
  2. CSS
  3. JS

So in relation to your post, if something can't be done in CSS I'll use JS, but if it can I'll always use CSS as first port of call. JS wasn't made for run of the mill styling, so using it over CSS seems a little obtuse to be honest.

Collapse
 
shubham567 profile image
Shubham Shekhar

Building for Dark Web / Tor Browser 😉