hsl(), hsla() and rect()

[zlatanvasovic]

If rgb() and rgba() shouldn't have spaces after commas, what about hsl(), hsla() and rect()?

HSL(A) and rect aren't common, but they also shouldn't have the spaces after commas.

[hnrch02]

I'll take the opportunity of this issue and ask why there shouldn't be spaces after commas in rgb() and rgba(). Any particular reason to this contradiction to the "Comma-separated values should include a space after each comma"-rule, except for personal preference?

[zlatanvasovic]

It is better for readability.

rgb(0,0,0,0) allows you to read the numbers as fast as possible.

rgb(0, 0, 0, 0) doesn't allow you to focus on the numbers.

[MaciejLisCK]

@zdroid In your example it is better for readability, but I think this is the only case. Consider following example:

rgba(215,106,180,.9) - in my opinion worse readability

rgba(215, 106, 180, .9); - in my opinion better readability

[zlatanvasovic]

I think that rgb(215,106,180,.9) is better.

Edit: that is my opinion, but not everybody writes code on the same way.

[mdo]

The guide was updated yesterday to better explain the balance between this and the guideline quoted by @hnrch02.

Comma-separated values should include a space after each comma.

Don't include spaces after commas within rgb() or rgba() colors to differentiate color values from CSS properties that allow multiple values that are already separated by a comma and space. Also, don't prefix values with a leading zero (e.g., .5 instead of 0.5).

These two guidelines go hand-in-hand. The goal is to make rgb(), rgba(), hsl(), and hsla() values appear as a single meta value within your CSS. Multiple values, like those of a box-shadow, should have a space after the comma. Color values, however, shouldn't, as a means of differentiating the two.

Here's a longer example of both these rules combined:

/* With the space after commas within color values. */
.element {
  color: rgba(255, 255, 255, 0.75);
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 2px rgba(0, 3px, 6px, 0.15), inset 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* Without the space, but with the space between multiple values. */
.element {
  color: rgba(255,255,255,.75);
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px rgba(0,3px,6px,.15), inset 0 1px 0 rgba(0,0,0,.5);
}

That's a rather extreme example, and honestly one that doesn't make that much sense color-wise 😆. However, it demonstrates the difference in how the scannability of CSS is affected by too much spacing within property values.

And yes, that section should probably be updated to include these other color options and the rect value.

[zlatanvasovic]

Thanks.

2014-03-05 17:51 GMT+01:00 Mark Otto notifications@github.com:

The guide was updated yesterday to better explain the balance between this
and the guideline quoted by @hnrch02 https://github.com/hnrch02.

Comma-separated values should include a space after each comma.

Don't include spaces after commas within rgb() or rgba() colors to
differentiate color values from CSS properties that allow multiple values
that are already separated by a comma and space. Also, don't prefix values
with a leading zero (e.g., .5 instead of 0.5).

These two guidelines go hand-in-hand. The goal is to make rgb(), rgba(),
hsl(), and hsla() values appear as a single meta value within your CSS.
Multiple values, like those of a box-shadow, should have a space after the
comma. Color values, however, shouldn't, as a means of differentiating the
two.

Here's a longer example of both these rules combined:

/* With the space after commas within color values. /.element {
color: rgba(255, 255, 255, 0.75);
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 2px rgba(0, 3px, 6px, 0.15), inset 0 1px 0 rgba(0, 0, 0, 0.5);}
/ Without the space, but with the space between multiple values. */.element {
color: rgba(255,255,255,.75);
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px rgba(0,3px,6px,.15), inset 0 1px 0 rgba(0,0,0,.5);}

That's a rather extreme example, and honestly one that doesn't make that
much sense color-wise [image: 😆]. However, it demonstrates the
difference in how the scannability of CSS is affected by too much spacing
within property values.

And yes, that section should probably be updated to include these other
color options and the rect value.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/43#issuecomment-36764592
.

Zlatan Vasović - ZDroid

[hnrch02]

That's a pretty solid point, I still prefer the spaces though, helps for readability IMHO Anyway, when I deal with CSS I write Sass, so I exclusively use rgba(#fff, .5).