Is There A Valid Reason NOT To Use Shorthand CSS Notation For Colors?

[abajan]

For several years now, I’ve noticed that style sheets for websites, designed by whom I would consider to be well seasoned pros, contain the long hexadecimal form of color names. Why go to the trouble of typing #FFAA00 when #FA0 would suffice? And why not #fa0 instead of #FA0?

Are the longhand and ALL CAPS forms more recognizable across browsers and platforms or something?

[htmlbasictutor]

I personally create my CSS file manually and type the properties out, including colour numbers. So I was curious about your question so Googled for some ideas as answers to your question:

From an Adobe article:

...A key issue to note when using shorthand CSS, is that values omitted from a shorthand CSS property are assigned their default value. This may cause pages to be incorrectly displayed when two or more CSS rules are assigned to the same tag....

...If you have styles defined in more than one location (for example, both embedded in an HTML page and imported from an external style sheet) using both the short and long forms of CSS syntax, be aware that omitted properties in a shorthand rule may override (or cascade) properties that are explicitly set in another rule.

For this reason, Dreamweaver uses the long form of CSS notation by default. This prevents possible problems caused by a shorthand rule overriding a longhand rule....

Source: About Shorthand CSS properties

[abajan]

Originally Posted by htmlbasictutor

I personally create my CSS file manually and type the properties out, including colour numbers. So I was curious about your question so Googled for some ideas as answers to your question:

From an Adobe article:

Source: About Shorthand CSS properties

Okay, so using the long form basically helps to error proof coding but what about the ALL CAPS? Is that just to help one visually locate colors quickly in bulky CSS code or are there browser/platform issues to consider?

[Izzmo]

there is no difference between all caps and all lowercase, or even in between. That's up to you and how you want your stylesheet to look. It's the same principle in HTML when doing tags.. ie you could do <P> or <p>.

But yes, as far as shorthand and longhand, I would always use longhand. If you use shorthand, there is a possibility different browsers will handle the color different. This is especially true in Mac's.

[htmlbasictutor]

Originally Posted by Izzmo

...It's the same principle in HTML when doing tags.. ie you could do <P> or <p>....

When coding for XHTML, elements and attributes are in lower case.

4.2. Element and attribute names must be in lower case
XHTML documents must use lower case for all HTML element and attribute names. This difference is necessary because XML is case-sensitive e.g. <li> and <LI> are different tags.

Reference: 4. Differences with HTML 4 - XHTML 1.0 specification

Differences Between XHTML And HTML

[abajan]

Okay. Thanks for the feedback, guys.

To be on the safe side, I’ll change all of my shorthand color codes to longhand. However, my markup has always been lowercase to ensure validation because all of my sites are XHTML 1.0 (Strict). And since its easier to type all lowercase anyway, I got into the habit of typing my CSS like that too (although I have a vague recollection of reading somewhere that font names - or is it font family names? - should start with capital letters for better browser support).

[Izzmo]

I understand that, it will not validate, but it will still work. (Just stating a overall basic principle.. not validation rules or how to code correctly)

[Izzmo]

XHTML has nothing to do with CSS.

CSS, IMHO, should be uppercase for things like color-codes. But lower case for any attributes.

[abajan]

Originally Posted by Izzmo

XHTML has nothing to do with CSS.

CSS, IMHO, should be uppercase for things like color-codes. But lower case for any attributes.

I didnt imply XHTML had anything to do with CSS. Its just faster to type everything in lowercase.

[Izzmo]

True, it is.