A Vote for CSS Variables

http://www.piehead.com/blog/2012/03/a-vote-for-css-variables

by scoregoals12 • 14 years ago

27 30 14 years ago

I'm really afraid of CSS having too much logic and driving designers away. I don't want to go back to the days when designers mocked up in Photoshop and had devs (inferior designers) do the CSS.

micheljansen• 14 years ago

I'm a designer and I just finished moving our product form CSS to Less.js (server-side preprocessed). This allowed me to define variables such as @baseColor, @buttonColor etc. so that the developers working on the project can use those instead of copy/pasting colours from other places and making a huge mess.

Variables are not logic. Once CSS seizes being declarative and starts becoming a programming language, I think we might start seeing problems, but the author is not suggesting adding an if-statement to CSS (one might argue that media queries are already conditional enough).

rglover• 14 years ago

You make a good point, but real designers know how to code (at the very least HTML/CSS). I'd consider any veteran designer who tells you they're "frightened by code" to not be worth it. Perhaps new concepts like variables will just be natural selection for the front-end.

I'm a designer, by the way.

richthegeek2• 14 years ago

This tends to insult the design community, but hopefully you'll fine the humor in it:

The proper name for a web designer who can't write HTML+CSS is "artist".

tripzilch• 14 years ago

The mythical designer that

1) is able to write valid cross-browser CSS ready for deployment without developer tweaking

2) would not understand basic logical constructs such as CSS Constants.

does not, in fact, exist. At least, I have never met one.

Think of it like this, imagine there is a sort of spectrum for capability of abstract logical/mathematical related thought. Roughly, on one extreme end there's someone who is so intuitive practical you wouldn't trust to properly split a dinner bill (this is not a "designer stereotype" btw, but an example of the very extreme end of the scale), in between there's doing calculations, solving simple equations, writing CSS, writing CSS-with-constants, using a templating language, doing actual coding, hardcore coding genius, and at the far end there's Neo who can stop bullets with his mind by wearing the right kind of shades and longcoat.

Your fear of "having too much logic and driving designers away" is only valid if the majority of web-designers fall right between "capable of writing CSS" and "capable of writing CSS with constants". Sorry but that's a rather narrow range and I'm not buying it.

And the few designers that happen to fall exactly in that range will either have to write CSS without constants (which is fine), or learn to deal with it.

MatthewPhillips2• 14 years ago

I'm not saying that this is the spec that pushes CSS into the code-territory. I'm not saying there is any one spec that does. I'm looking at the aggregate of CSS4 and am afraid that we are heading in that direction. See, for example, the crazy (and awesome, btw) things you can do in upcoming selectors such as matches[1] combined with a for[2], or the mind-bender that is the shadow dom[3].

[1] http://dev.w3.org/csswg/selectors4/#matches [2] http://dev.w3.org/csswg/selectors4/#idref-combinators [3] https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shado...

mistercow• 14 years ago

I agree. I really think it's practically impossible to be capable of writing CSS and still have difficulty understanding CSS constants. The whole idea of CSS is that instead of declaring your style inline over and over again, you declare it in one place and then apply it to an entire class of layout element.

Every concept that is part of "constant" is fundamental to understanding CSS in the first place.

aqme28• 14 years ago

I'd be more as worried that unintuitive design would scare potential designers away.

Seeing something like #046e08 everywhere scared me much more as a new developer than something as simple as "let green1 = #046e08" would have.

masklinn3• 14 years ago

There's no logic to defining constants. Which is what the "CSS Variables" proposals are about.

It merely makes maintenance much, much easier.

kamjam• 14 years ago

If something as simple as a variable scares you then I am guessing you have no hope in hell with dealing with a bit of jQuery, let alone Javascript.

Welcome to the real world. It's time to upskill.

Side note: Developers may be inferior designers, but that does not make them inferior coders, since by their nature, that is what they do day in, day out. I am not a designer, I am not a front end guy, but my html/css/javascript is a lot better quality and reusable than I have seen come out of any design agency. We won't even go into having any consideration of the selectors they use and any rendering speed they may have...

akdetrick• 14 years ago

I'm afraid of the same thing, but not because it will drive away designers, but because CSS is meant to be, and is most powerful as a declarative language.

What CSS really needs is an actual layout module in the specification (instead of the hacks we still use to this day to execute the most simple of layouts).

With all that said, I do think variables are a great idea.

xutopia• 14 years ago

The issue is speed. CSS has to be fast if we want to display pages quickly. An alternative I prefer is lesscss.org or sass-lang.com.

mattmanser2• 14 years ago

This isn't even close to being an 'issue'.

Unless maybe you are living in the 80s and using a Spectrum 48k?

Speed. Christ.

woogychuck2• 14 years ago

I really don't see how this would have a major negative impact on speed. If anything, it will allow CSS files to be smaller reducing the amount of data being downloaded to the client and may actually improve performance.

masklinn3• 14 years ago

> The issue is speed.

It makes no difference, these are proposal for constants so it's trivial substitution. Furthermore by avoiding repeating the same value over and over again CSS variables likely reduce the file's size.

lucian1900• 14 years ago

CSS constants! Names, symbols, whatever. Just don't call them something that implies they change all the time.

woogychuck2• 14 years ago

I agree that the name is confusing. They really aren't variables.

richthegeek2• 14 years ago

If they act in a similar way to variables in SASS, then they can be reassigned without issue. They are not constant, although they may be treated as such.

Of course, the CSSWG will no doubt create a solution that is both absurd in it's complexity, and limited in it's use. For example, constants defined with css-constant('foo', 'bar') instead of $foo: bar

masklinn3• 14 years ago

> For example, constants defined with css-constant('foo', 'bar') instead of $foo: bar

The issue with sigil is that they risk conflicting with (and making more complex the parsing of) selectors. `$` used to be coopted by the Selectors Level 4 draft spec in order to select a non-tail subject for instance (it's apparently been changed to the `!` suffix).

Not that I like what they picked any more than you do (the spec is currently using the `data-` prefix for definition and `data()` for dereference, likely in keeping with HTML5's `data-` attributes)

eru• 14 years ago

In Haskell we don't change our variables either, and nobody's confused.

Martijn• 14 years ago

In Haskell variables are called variables because they potentially have a different value each time the function is called.

See also Variable (mathematics) [1] vs. Variable (computer science) [2].

[1] https://secure.wikimedia.org/wikipedia/en/wiki/Variable_%28m... [2] https://secure.wikimedia.org/wikipedia/en/wiki/Variable_%28c...

mattmanser2• 14 years ago

I hadn't seen that spec before. That really is one truly awful spec on so many levels.

http://dev.w3.org/csswg/css-variables/

judofyr• 14 years ago

How so?

TylerE• 14 years ago

It's W3C, what were you expecting? It's the very best example of death-by-committee I've ever seen. If they designed a lightbulb, it'd require a 9 step checklist just to get it out of the packaging, wouldn't fit in the industry-standard socket (because, of course, they've reinvented the wheel again, poorly), and by the time you actually got the thing installed the rest of the world will have moved on to better light-producing devices, but will be forced to deal with the W3C brain-damaged version of the lightbulb because it's a "standard".

mmatants• 14 years ago

I think future Web standards should take out the Gecko/Chrome/IE layout+parsing engine and make it a separate library. Standardize a minimalistic (but powerful) GL-style presentation API.

Why are standards committees dictating developer workflow? We should be able to swap in our own parser and UI framework (which is what DOM is) that fits the specific website/webapp needs best. Not reinventing the wheel, of course - things would naturally coalesce into ubiquitous standard libraries, but a bit more competitively.

sixcorners• 14 years ago

Then maybe we can get rid of all this javascript stuff and start sending .exe files to each other.

twfarland• 14 years ago

This wouldn't make css any more powerful than it can be when treated as a compilation target. You can get all the logic you need in a preprocessor embedded in another language, e.g for js I made this: http://github.com/twfarland/son

New styling possibilities would be more interesting, e.g layer blend modes.

A Vote for CSS Variables

Related Stories