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.

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.

• javascript
• css

• you're probably right- I should probably pick the best answer for my questions even if none of them are dead on. – drcode Commented May 4, 2011 at 15:05
• To all the people asking "why?" I answer: to use the same colors in a canvas. – Victor Commented Jan 14, 2014 at 14:07

7 Answers 7

If the "constant" corresponds to some parameter that can be ready from an element, then in your javascript startup you can read that element. For example, if what you care about is the width of some element with id="foo" you could use (assuming jquery)

$('#foo').width()

or

$('#foo').css('width')

But for more complex sets of global variable, I've started using a hack of embedding stuff as strings in the background-image attribute of a hidden div. This works because you can put just about anything in a background-image string. And then in javascript startup I can read that string from background-image on that div and decode it to javascript.

For example, I have a .less file with these "constants"

@hide-time: 450;
@hide-final-width: 40;

and in that .less file I use these for this div

#css-shared-globals {
  background-image: url("about:$$$({hideChatTime:@{hide-chat-time},hideFinalWidth:@{hide-final-width}})$$$");
  display:none;
}

in the related .html file is this otherwise-useless div:

<div id="css-shared-globals" style="display:none;"></div>

and finally in .js I can read the shared global constant from that hidden div with this startup code:

// load globals from chat.less
var el = $('#css-shared-globals');
var elObj = eval(decodeURI(el.css('background-image').split('$$$')[1]));
hide_time = elObj.hideChatTime;
hide_final_width = elObj.hideFinalWidth;

The result of the whole kludge is that my .less (or .css) and .js files are seeing the same constants and I only need to change them in one place (the less or css file). It's a mess but, so far, it works.

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)

An interesting idea in this blog where you use css variables in your CSS, but set them using javascript. Thus, the CSS takes on what values your JS gives them.

eg

:root { --var: blue; }
.myclass { colour: var(--var); }

and in js

anyelement.style.setproperty('--var', 'red);

and the css variable gets set to the JS constant. But this is really for changing variables, not pre-processing constant values.

JS can access CS variables these days via: getPropertyValue

getComputedStyle(document.documentElement)
    .getPropertyValue(varName);

more info here: https://levelup.gitconnected.com/stop-duplicating-constants-between-js-and-css-40efd253a945

There's Chuusha: https://github.com/trotter/chuusha

Also see: http://icant.co.uk/articles/cssconstants/

Consider a redesign. Why are half of those constants in JS while the other half are in CSS?

Try and apply the Information Expert principle and the Don't Repeat Yourself (DRY) principle. Ask yourself if you are respecting the separation of concerns which exists between behavior (JavaScript) and presentation (CSS).

If you want constant variables, use JS's "document.var = X;"

That'll keep whatever vars you want globally stored.

I.e.

document.eleX = 12; document.PositionTopofDiv3 = 234;