Adding a class vs. Manipulating CSS

[nixnerd]

When I use JS to style DOM elements, I generally create a CSS class for that specific case. Then, I’ll use JS (generally jQuery) to add that class to said element. Is this cleaner than manipulating the CSS in JS?

I guess in terms of SLOC… it’s kind of pick your poison. But the former method feels more separated and clean to me.

The only reason I ask, is adding classes seems prohibitively hard when I use GSAP for animation. This (if I’m correct) strikes me as a real negative. I don’t like a bunch of CSS cluttering up my JS.

[__]

But the former method feels more separated and clean to me.

Yes. JS manipulation is basically the DOM equivalent of dynamically adding inline styling.

adding classes seems prohibitively hard when I use GSAP for animation.

There’s going to be a break-even point when it comes to stuff like that. Classes are the only way to go, for example, when you’re talking about changing UI styles to reflect a change in state. That’s way different than a complex animation sequence.

I don’t like a bunch of CSS cluttering up my JS

Possible to put them all in a “css” object somewhere?
like animate( {background: css.newBGcolor} ) (or whatever)?

[nixnerd]

Possible to put them all in a “css” object somewhere?

Possible? Yes. Just haven’t done it.

There’s going to be a break-even point when it comes to stuff like that.

Yeah… I just can’t quite figure out where that is with GSAP. I don’t really see the point in using it half the time because it has MANY advantages over jQuery… but very few over CSS. I’ve looked at benchmark after benchmark and CSS is more or less comparable on most things. The only place it loses is complex sequencing.

But in terms of raw performance, GSAP and CSS are basically a tie. And if I’m using jQuery to add CSS classes… well, I get the best of both worlds unless I need a 10 step animation.

[nixnerd]

JS manipulation is basically the DOM equivalent of dynamically adding inline styling.

So you’re saying I SHOULDN’T be inline styling things? Next, you’re going to tell me I shouldn’t write JS inside script tags! :)

[__]

Next, you’re going to tell me I shouldn’t write JS inside script tags!

No all your JS statements need to be in anchor hrefs.

Then $('a').click();

[nixnerd]

@TheDoc… I haven’t found a better way with GSAP because it has a funky way of doing things. I don’t even think it’s possible since it’s a TWEENING engine. It needs two numerical values to animate between. Adding a class is a binary function. It’s either added or it’s not. What a shame. So… I really think the sick benchmarks are secondary to the code maintainability problems.

Plus… AFAIK, if I add a CSS class with jQuery… it’s actually CSS performing the animation, provided I have a transition set up. So… the benchmark where GSAP destroys jQuery doesn’t really mean much in that context.

[nixnerd]

No all your JS statements need to be in anchor hrefs.

I think we can all agree the best way is to use an onclick event:

<button onclick="myFunction()">Click me</button>

[nixnerd]

I was reading about React, Facebooks JS framework and I came across a technique they refer to as “diffing.” From what I can tell, it will examine the state you want an element to go FROM and examine the state you want it to go TO and automatically fill in the diff by redrawing every single frame to completion. This sounds like it involves canvas. But wouldn’t it be awesome if there was a tool out there that did something similar to “diffing” in the DOM? I’m thinking something like GSAP that allowed for more modular code.

Total control of timeline + diffing FTW!

[nixnerd]

Apparently GSAP is able to add a CSS class… which is weird because to my knowledge none of their tutorials go over that. You gotta troll the forums or read the docs.

But wouldn’t it be awesome if there was a tool out there that did something similar to “diffing” in the DOM? I’m thinking something like GSAP that allowed for more modular code.

Total control of timeline + diffing FTW!

GSAP has all this so I’m back in love with it.

Codepen for evidence:

http://codepen.io/GreenSock/pen/b128c65e197e46dfa8a980d229c45114

On feature: I’m not the kind of feature MY OWN answer… but if anyone in the future stumbles upon this… here is your answer.

[Author]

Posts