Skip to content

Best way to share constants between Javascript & CSS

I’m creating a website with lots of dynamic stuff laid out in javascript, as well as CSS. What’s bothering me is that half of my dimension constants (positions and sizes of things on the page) are in my javascript, whereas others are in my CSS. Is there a good way to have a “single place” for constants like this?

First I thought I could use a CSS generator like LessCss or SASS, but in the documentation for those I see no way of accessing declared constants from another javascript file either. Can anyone point me to a clear, idiomatic way of handling this issue?

Thanks for any help!

EDIT:

To clarify what my problem is: Part of my page consists of a highly-spezialized spreadsheet component I’ve built from scratch in javascript to run in a canvas element. I have lots of layout constants related to this component, such as cell_width,cell_height, etc. that are not standard CSS properties. Other components of my website are more typical, and are styled by CSS. What I’m wondering is if there’s an accepted way for maintain a single place to keep my CSS and Javascript styling constants in a single place. This could either be by somehow maintaining “custom” properties in my CSS that are used only be reading them via javascript. Or, if LessCss or SASS have a way to set variables via my own javascript prior to rendering, that would work as well. However, I have found no info online on either of these subjects.

Answer

Is there a good way to have a “single place” for constants like this?

The stylesheet.

Then dynamically set class names.

(At least in many cases. We don’t know the specifics of your problem)