To Comma-Separate, or Not to Comma-Separate, That is The Question

An interesting debate popped up on the weekly CSS Working Group phone call yesterday, and I’m sitting here eating lunch, still thinking about it.

So I want to know what you think — you people who write CSS all the time, who care, who will be living with the results of this decision.

So here’s the deal.

The oldest values you can use to specify a color look like this: #eee or #fefefe or red. More recently we gained RGB and HSL. They look like this:

color: rgba(255, 255, 255, 0.5);
color: hsl(240, 100%, 50%);
background-color: rgba(108, 210, 136, 0.65);
border: 1px solid color: rgb(0, 0, 0);

Note the commas that separate the values.

There’s a new property coming in the world of color, it’s called color(). There is a proposal to make it look like this:

background-color: color(0.1 0.2 0.3 50%);

Note the lack of commas.

Meanwhile, there are other properties in CSS where a list of values specifies something, and they may or may not have commas.

Here are a few examples:

margin: 0 2em;
padding: 1em 2em 0.5em;
border: 1px solid #000;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: repeat(8, 15vw);
grid-template-columns: repeat(5, 1fr 1.2fr 1.2fr 0.5fr);
shape-outside: circle(at 50% 50%);
clip-path: polygon(0% 0%, 100% 3%, 98% 99%, 3% 93%);
color: rgba(255, 255, 255, 0.6);
color: hsl(240, 100%, 50%);

There are people in the CSS Working Group who want to get rid of the commas in the new color function, because to them, it feels more consistent with the rest of CSS. They know it’s inconsistent with the other color values, but think those other color values are dumb — and never should have been created with commas. They want to fix that now by making the new thing not have commas.

Then there are other people who think it will be very confusing to have some color values use commas (like rgb() and hsl()) while the new color() function doesn’t. Like many things in CSS, perhaps we would do it differently if we were starting from scratch now, but once something is shipped, we need to stick to it. Values for specifying colors have commas, the new one should be the same.

Some folks are proposing that the new function not have commas, while the old functions (rgb and hsl) get new rules — where you could use commas (which we have to do to support older websites) but you could instead “switch” and no longer use commas. You’d be required to be comma-less for color(), while using commas or not — your choice — for rgb() and hsl().

Some folks think, ok, this comma-optional idea has merit. Let’s make this so the people who don’t want to use commas can write new code across all our color functions (color, rgb, rgba, hsl, hsla) without commas. But let’s also allow commas in the new color() function so that people who are used to commas don’t have to change their practice, and they can do what they would expect, and use commas in the new thing. Basically, make commas optional everywhere.

Then there are people who think, OMG, we are going to make this overly complex and crazy-making by allowing commas but not requiring them. Let’s just keep things simple. We’ve already started out with commas in color functions. Just keep it that way. color() should use commas so that the new thing is consistent with the older things. Maybe it’s not “pure” when thinking about code syntax across all of CSS, but it’s easier for people who write CSS, and that’s important.

What do you think?