Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Best Practice
from Google HTML/CSS
Style Guide

@teppeis

Front-End Study #8 at Cybozu, Inc.

May 15, 2012

Google HTML/CSS Style Guide

What?

Googleが4月末に公開した
HTML/CSSのスタイルガイド

http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
Screen capture

Background

This document defines formatting and style rules for HTML and CSS, includeing GSS.

Aims

特徴

省略厨

Googleさんはトラフィックが死活問題なので、ガチンコにバイト単位で削ってます。

良い子はマネしちゃいけないルールも。

Good!

それぞれのルールに詳細な理由が書いてある。和訳だけ読んでると分からないよ!

General Rules

Protocol

<!-- Not recommended -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

いきなり
賛否両論

IE7/8でに重複リクエストが飛ぶよ

http://www.stevesouders.com/blog/2010/02/10/5a-missing-schema-double-download/

General Formatting Rules

General Meta Rules

UTF-8 (BOM無し)

<meta charset="utf-8">

HTML Rules

Document type

<!DOCTYPE html>

Valid & Minimal

<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>
<!-- Recommended -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Saving money, saving bytes</title>
<p>Qed.

Semantics

<!-- Not recommended -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- Recommended -->
<a href="recommendations/">All recommendations</a>

Separation of concerns

Strictly keep structure (markup), presentation (styling), and behavior (scripting) apart.
<!-- Not recommended -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:
  <u>HTML is stupid!!1</u>
<center>I can’t believe there’s no way to control the styling of
  my website without doing everything all over again!</center>
<!-- Recommended -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually
  doing it: separating concerns and avoiding anything in the HTML of
  my website that is presentational.
<p>It’s awesome!

CSS Rules

ID and class naming

/* Not recommended: meaningless */
#yee-1901 {}

/* Not recommended: presentational */
.button-green {}
.clear {}

/* Recommended: specific or generic */
#gallery {}
.video {}
.alt {}

Prefixes and delimiters

/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}

/* Not recommended: uses underscore instead of hyphen */
.error_status {}

/* Recommended */
#video-id {}
.ads-sample {}

Type selectors

For performance

/* Not recommended */
ul#example {}
div.error {}
/* Recommended */
#example {}
.error {}

Shorthand

/* Not recommended */
color: #eebbcc;
font-size: 0.8em;
margin: 0px;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* Recommended */
color: #ebc;
font-size: .8em;
margin: 0;
padding: 0 1em 2em;

CSS Formatting Rules

/* セレクタは改行 */
h1,
h2,
h3 {
  /* アルファベット順 */
  display: block;  /* コロンのあとに半角スペース */
  font-weight: normal;  /* 行末にセミコロン */
  line-height: 1.2;
}

CSS Hacks

Avoid user agent detection as well as CSS "hacks"

Last Resort

Parting Words

Be consistent.

Look at the code around you.

Use a spacebar or arrow keys to navigate