A case against CSS variables

Bert Bos of the W3C in a recent essay on the subject makes a good case against the inclusion of variables and macros in the CSS language. I’m not sure I buy all of his points, but the overall argument for simplicity makes sense.

Incidentally we have something similar in Issuu’s layout language, although in a limited sense. They’re called anchors, and you define them thus:

<anchor name="outerMargin" x="50" />
<anchor name="controlBarCenterLine" y="60" />

Then you can align objects to these anchors. e.g.:

<image source="#Logo" left="#outerMargin"
  verticalCenter="#controlBarCenterLine" />

Unlike CSS “variables” though, IML anchors can be truly dynamic, as in the case of the predefined anchors in the viewer:

<pageNumber top="20" right="#droppContentRight" />

The above aligns the right edge of the page number control to the right edge of the document object, represented by the droppContentRight anchor. You can see this in action in the Basic Grey theme: as you resize the browser window, the document object gets resized too and the page number control shifts position accordingly.

The idea behind anchors of course is to decouple the positioning attributes from their intended values by adding a layer of abstraction. The designer can set up grid lines which can then be used for aligning objects. i.e. instead of setting all objects in the first column to a margin of 50, you can set those objects to a variable called outerMargin, which can then be adjusted independently without touching the objects. The anchors defined in an IML document should give you a sense of the overall layout of its content.

To that extent, we have here what is the equivalent of CSS variables. I wouldn’t venture to add variables of other types to the language though, for the very same reason cited by Bert, i.e. in the interest of simplicity.