Best Practice
from
Google
HTML/CSS
Style Guide
Google HTML/CSS Style Guide
What?
Googleが4月末に公開した
HTML/CSSのスタイルガイド
Background
This document defines formatting and style rules for HTML and CSS, includeing GSS.
Aims
- Improving collaboration
- Code quality
- Enabling supporting infrastructure
特徴
省略厨
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>
いきなり
賛否両論
General Formatting Rules
- インデントは半角スペース2文字
- タグ名や属性名は小文字
- 文末にスペースを置かない
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
/* 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.