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

问题

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;
}

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?

回答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'.

回答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)

回答3:

There is no standard but consistency is important.

Upper case notation makes sense to separate numbers (decimal or hex) from words for consistency. For example in "1px solid #D0D0D0" all letters and keywords are lowercase (short) and numbers/digits are tall; note that both "0" and "D" are digits.

This is also consistent with the rest of the project which may have different hex syntax like 0xCAD or \xCAD or CADh. Writing 0xcad, \xcad or cadh wouldn't be readable.

回答4:

"it is very common to find uppercase notations"

This answer isn't an argument that you should use uppercase in CSS so much as aesthetic conjecture and historical precedent why you'll often see uppercase.

(1) So you already know there exist both minuscule letters (x-height or roughly half height of majuscule) and majuscule letters (capital or uncial, where letters occupy nearly the full height of the em box), but there are also exist full height digits and lower height digits (also called old style numerals, lowercase, hanging digits). You won't find these digits much in the real world, outside grandfather clocks, but many fonts support them via the 'onum' feature or sometimes even the 'scmp' (small caps) feature.

Knowing that these height variants both exist, displaying a mixture of full height digits with half height letters yields an inconsistency of character heights, and conversely, mixing half height digits with full height letters yields character height inconsistency (granted, you can't use half height digits outside OpenType features anyway since they have no unique Unicode code point). So a professional design application like PhotoShop may favor aesthetic of presentation vs efficiency of typing (holding down the shift key) which wasn't as paramount before CSS ubiquity.

Old Style Figures

List of Typographic Features

(2) Early programming languages (COBOL, FORTRAN, BASIC...) and input terminal devices were exclusively uppercase - there were no keys to type lowercase, and even if there were, these characters did not exist in the limited character sets.

Did keyboards have caps lock on by default

回答5:

Nobody today contests case-insensitivity of hex numbers, however when comparing to other number systems, case-insensitivity is rather exceptional. In fact, versatile number system converters rarely make that exception, they assume either numerals made of only capitals, or only lower case characters.

Historically, hex numerals were represented by capitals only, simply because early operating systems did not encode lowercase characters. People doing retro-computing would therefore definitely chose capitals.

回答6:

CSS values are case insensitive. Saying that it is not a good practice to use uppercase. Go with the norm. Use lowercase.

来源：https://stackoverflow.com/questions/32695983/is-there-a-reason-to-use-uppercase-letters-for-hexadecimal-css-color-values

标签

css

case-insensitive

uppercase