Google HTML/CSS Style Guide

Perm URL with updates: http://xahlee.org/js/Google_html_css_style_guide.html

Google now has a coding style guide for HTML/CSS, at Source google-styleguide.googlecode.com

i learned a few interesting things.

Omitting Protocols in Links

Google suggest omitting protocols in links that are HTTP/HTTPS. Example:

<!-- Not recommended -->
<script src="http://www.example.com/main.js"></script>
<!-- Recommended -->
<script src="//www.example.com/main.js"></script>

Source google-styleguide.googlecode.com

Google says:

Omitting the protocol—which makes the URL relative—prevents mixed content issues…

Google didn't specifically say if this is from the new HTML5 spec. Or, perhaps, it's a obscure feature of URI spec. (anyone knows?)

HTML5's Short charset Meta Tag

The charset meta tag can be shortened. Following is HTML4 syntax:

<!-- HTML 4 -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

following can be used for HTML5:

<!-- allowed in HTML 5 -->
<meta charset="utf-8" />

HTML5: “type” Attribute for CSS/Javascript Not Necessary

in HTML5, “type” attribute can be omitted in the link to CSS or javascript. Example:

<!-- HTML 4 -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!-- allowed in HTML 5 -->
<link rel="stylesheet" href="mystyle.css" />

HTML5: Omitting Start/End Tags

Lots start/end tags can be omitted in HTML5. Here's Google's example:

<!-- Not recommended -->
<!DOCTYPE html>
    <title>Spending money, spending bytes</title>
<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>

Source google-styleguide.googlecode.com

This is really the worse recommendation, and a lousy spec of HTML5, as it makes the language much more confusing and complex.

It would be much better to NEVER omit tags, so the syntax is simple and regular.

Once you encourage omitting tags, soon people will omit tags that shouldn't be omitted, introducing confusion and complexity.

If you read the HTML5 “living standard” document, you can see how complex and confusing it is.

This applies to language design too. Basically, you want to reduce “multiple routes” as much as possible. Any inconvenience, such as typing it, can be automated by tools. The worse offender is unix shell utils. (See: Unix Pipe as Functional Language.)

Is it Good Style?

Overall, i don't agree with half of their recommendations.

Their style guide for Python, Javascript are very good. (See: http://code.google.com/p/google-styleguide/.)

For the HTML/CSS style guide, it seems they are pushing arbitrary preference. The reason they gave are not cogent. They are more or less opinion only, with lots room for argument. In many cases, it's not consistent within itself. Examples:

• They suggest indenting by 2 spaces. This is really not necessary. (Source google-styleguide.googlecode.com)

• They suggest all lowercase for HTML (for tag names, attribute name/values, etc.). This'd be great advice for XML, since it is case-sensitive, and XHTML element names are all lowercase. But elsewhere they often suggest readability. Note that CAP CASE for tags were the recommended style for HTML from about 1995 to 2005. Cap case is more readable, as it distinguishes markup from content text.

• They recommend using HTML5, and recommend against using XHTML. Note that XML/XHTML was widely considered the future from about ≈2000 to ≈2008. The HTML5 people are rebels and wants to overthrow strict validation and XML.

What's HTML5? It's a flying-fuck-in-your-face against a decade of what W3C told us about what HTML should or should not be. HTML5 was started by mostly Google and Apple, and in the beginning was sneered by W3C, but W3C finally lost the power struggle and accepted HTML5.

• They recommend using valid HTML when possible. But as far as i know, Google has never encouraged valid HTML in their hundreds blogs and videos for webmasters, and of the billions of pages Google produced, i'm not aware of one that is valid HTML. (Source google-styleguide.googlecode.com)

• They recommend not to use redundant 0. e.g. font-size: .8em;. This is a bit strange. This is less readable and saves one byte, yet they DO recommend a space after the colon.

All the above points are rather trivial. After all, it's a guide on “style”. However, certain style matters are critical. But Google's HTML/CSS style guide address mostly trivial styles, and on critical issues such as correctness and well-formedness, it seems to side with bad taste.