Comments (7)
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?
from code-guide.
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.
from code-guide.
@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
from code-guide.
I think that rgb(215,106,180,.9)
is better.
Edit: that is my opinion, but not everybody writes code on the same way.
from code-guide.
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.
from code-guide.
Thanks.
2014-03-05 17:51 GMT+01:00 Mark Otto [email protected]:
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
from code-guide.
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)
.
from code-guide.
Related Issues (20)
- Пропустили букву н
- Missed letter "н" in word "переработаы" in Russian translation in css-organization section
- Remove 'ie-compatibility-mode.html'
- центрирование
- оодл
- link break HOT 2
- Attribute order for onclick event attributes HOT 2
- 哈哈
- Suggest using logical properties
- Add 'how to organize HTML code for better SEO' section HOT 2
- Code Guide Link to Bootstrap Property Order for Stylelint Broken HOT 1
- Add new JS section
- Some additional HTML updates
- Typo on table of content
- Missing Complete List of Properties & Their Order HOT 1
- Unclear media query placement example
- Was just wondering what your policy was on #IDs HOT 3
- html HOT 1
- Dz1
- grid
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from code-guide.