Is there a reason to use uppercase letters for hexadecimal CSS color values? [closed]

Question

I see that colors in CSS properties values are commonly written in the uppercase form:

.foo .bar {   background-color: #A41B35;   color: #FFF; } 

But you can also use:

/* Same same */ .foo .bar {   background-color: #a41b35;   color: #fff; } 

Or even the very controversial:

/* Check the link to see why it can be interesting */ .foo .bar {   background-color: #A41b35;   color: #FfF; } 

In any case (ho ho ho), using named colors like white, when possible, in place of #fff kind of make our life easier, but this is another question.

It looks like using lowercase values does the same, and, CSS values for colors are not case-sensitive. Lots of graphic design software also use the uppercase form. And it is very common to find uppercase notations in source code, it looks like there is something like a tradition.

I understand about the consistency thing, that it should be the same everywhere in you software, but as the standard doesn't give a good indication, people do what they want or what they are told to do.

Is there rational reasons for this, like historic, compatibility, old IE6 hacks, performances or practical reasons?

Answer 1

I am not aware of any differences other than personal preference. Personally, I prefer lowercase since it's quicker to read, although in very short strings such as CSS color values, the benefit is probably negligible. Really, I think it's just because I think lowercase looks better.

Hexadecimal, however, is traditionally written in uppercase, so maybe I'm - strictly speaking - in the 'wrong'.

Answer 2

It really doesn't matter, but what is important is having a convention and sticking with it. I like to use strict sass-lint rules to enforce lowercase hex values, and short values where possible (e.g. #fff instead of #ffffff).

Here are my reasons for choosing lowercase;

• Easier and faster to type (I have changed the key bindings of my caps key and using shift is just awkward, especially mixing numbers and letters)

• It's easier to search for something if you know what to expect. (Say you're rewriting old code to Sass, you've fixed all occurrences of #aa99cc, but what about AA99cc, Aa99CC, A9C, a9c? Linting will pick out these problems for you)