Avoid set styles directly in JS

Question

Avoid set styles directly in JS

joostf opened this issue 6 years ago · 6 comments

instead use custom properties

https://github.com/follywolly/web-app-from-scratch-18-19/blob/129e3c7de7e32b32a2eef8e74dfca60315437b4b/src/js/modules/render.js#L44

Answer 1 · 2019-02-08T12:37:47.000Z

Not really sure that would work since it's unknown how many colors the API can give back. This line is used to generate small divs that show the colors the artwork exists of.
Pretty sure I can't generate all necessary css variables and enough css rules in my css file to make that happen dynamically, right?

Answer 2 · 2019-02-08T14:17:46.000Z

I would think, one custom variable (--color) should be enough? Or am I not thinking straight?

Answer 3 · 2019-02-08T14:51:35.000Z

Well you would need a custom variable for each color, otherwise the divs that are supposed to represent (for example) 6 different colors would end up having the same color right?

Answer 4 · 2019-02-08T15:51:50.000Z

Yeah, I think you’re right! Op 8 feb. 2019 om 15:51 heeft Folkert-Jan <notifications@github.com<mailto:notifications@github.com>> het volgende geschreven: Well you would need a custom variable for each color, otherwise the divs that are supposed to represent (for example) 6 different colors would end up having the same color right? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#10 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ABAzAIrD5erVMNeB9DV_BAPbNNAfts4Aks5vLY73gaJpZM4avY8k>.

Answer 5 · 2019-02-08T15:55:56.000Z

The only way I can think of making that work is to make as many css variables as there are colors returned from the api within a js loop. Gonna look in to that.

Answer 6 · 2019-02-08T15:59:45.000Z

I’m gonna think about it some more aswell Gr. Joost Op 8 feb. 2019 om 16:56 heeft Folkert-Jan <notifications@github.com<mailto:notifications@github.com>> het volgende geschreven: The only way I can think of making that work is to make as many css variables as there are colors returned from the api within a js loop. Gonna look in to that. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#10 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ABAzAMp3AYhTFeMAuCcaloImiJi1ovYCks5vLZ4MgaJpZM4avY8k>.