34

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? This is a cultural question, not purely technical (although it can have technical origins).

4
  • 2
    Personal preference, best thing to do is choose one way (uppercase or lowercase) and stick to it throughout. Sep 21, 2015 at 13:08
  • 1
    It all boils down to personal preference. As mentioned by yourself, they are actually not-case sensitive. There is even a drupal document that advises using lower-case for HEX color: drupal.org/node/1360790 Sep 21, 2015 at 13:13
  • 3
    As a person who edit a lot of CSS, I think it is a pain to type uppercase.
    – smonff
    Jan 24, 2017 at 22:09
  • 1
    "It is thought by cognitive scientists and typographers alike, that lower-case text is more legible than upper-case. Yet lower-case letters are, on average, smaller in height and width than upper-case characters, which suggests an upper-case advantage." - National Library of Medicine National Institutes of Health. This means that lowercase is not inherently easier to read (given the height/width advantage of uppercase letters), despite the claims in many of the comments below.
    – Green
    Jan 25 at 17:37

8 Answers 8

38

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

1
  • 7
    People recognize letters and digits mainly by how the top part looks, so it makes more sense to use all uppercase. For me that also reads better, but I would not call anybody using lowercase wrong or anything. Apr 11, 2020 at 23:38
12

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
  • 7
    Lowercase is also easier to read for humans, e.g., compare deciphering C68B80D with c68b80d. Jul 17, 2018 at 11:20
  • 3
    Lower case hex might be ok in CSS however hex numbers can be anywhere in the project code and depending on convention "0xcad" or "cadh" may not look as readable as 0xCAD. Apr 12, 2019 at 15:46
  • 1
    Here is another reason to prefer lower case to UPPER CASE : the risk of confusing numbers with letters, notably 8 versus B, and/or 4 versus A. ~ * ~ Suggestion: use lowercase letters in hex literals.
    – Henke
    Oct 14, 2022 at 9:22
7

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.

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.

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

2

A quick google search lets you know that there are a lot of people who prefer lower-case. Personally, I find lower-case easier to spot, and easier to write, since most (if not all?) of CSS code is lower-case and not sensitive to case types. Oh, and looks better on the code. :3

2

Uppercase is objectively easier to read.

The exception is when lowercase is TWICE THE LEGIBLE SIZE, it can be easier to read due to "word shape" - the pointy bits on "d", "h", and "p" make "xxxd" and "xhxpx" distinguishable. REGARDLESS OF SIZE, codes like "1lmnmmn" do not have word shape.

Lowercase also suffers from similar characters like "1l" and "mnw" and others depending on the font. Uppercase also suffers this with O and 0 which is why the cross-bar-zero is used on console fonts.

Base32 took a whole different approach to this second problem by using all 26 UPPERCASE letters, and only 6/10 numerals: 2, 3, 4, 5, 6, and 7.

Early computer engineers made good choices for good reasons - legibility increases accuracy.

4
  • 1
    If uppercase is easier to read why all the books are not edited in uppercase? Plus, the point about similar characters is also quite weak I think since most programmers would use monospaced fonts that are designed to avoid those kinds of mistakes.
    – smonff
    Jan 28, 2021 at 13:38
  • 1
    @smonff please re-read my answer. Jan 28, 2021 at 16:26
  • I honestly read it many times. The link to Base32 Wikipedia page took me to the Hexadecimal page. It got a Written representation section that state that there are systems that use mixed cases conventions (like in AbCdEf) to help with character distinguishment. Looks like another possible interesting interpretation for CSS, and possibly making sense of using the mixture of lowercase [a-f] with the "uppercase" [0-9]? I wouldn't mix [a-f] + [A-F] though.
    – smonff
    Jan 29, 2021 at 4:49
  • 1
    "why all the books are not edited in uppercase?" Actually, Latin was written in all uppercase. Lowercase came much, much later, basically as a kind of cursive. How books are edited is based on historical conventions, not on maximizing readability. If that were the single biggest focus, we'd all speak esperanto and use the IPA alphabet, or something.
    – Kyle Baker
    Feb 14, 2022 at 11:03
-2

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

3
  • 13
    This is incorrect, there is no good or bad practice to use or not use uppercase or lowercase letters. Personal preference, just do yourself a favor and whatever one you choose (uppercase or lowercase) - stick to it and don't mix them. Sep 21, 2015 at 13:07
  • 1
    There are actually conventions in hexadecimal that said to use mixed case for readability improvement (like in AbCdEf). It doesn't mean that we should do it, but it could favor in use of "lowercase" CSS (since digits could be considered as de-facto uppercase).
    – smonff
    Jan 29, 2021 at 6:47
  • 1
    When I found this question in google, it shows up immediately this answer with big text the most negative one. It's lucky I was checking the post. If not, I was going to believe it as the answer.
    – Felix Htoo
    Apr 8, 2022 at 10:30

Not the answer you're looking for? Browse other questions tagged or ask your own question.