Google HTML/CSS Style Guide

css

HTML/CSSを書きだした頃は、どうすれば良いか随分迷ったり
本やcss coding rule何か見たりして、最近はだいたい統一できるようになってきたけど
こういう指針をgoogleみたいなとこが出してくれると
ある程度標準化される気がするので嬉しい。
（プロジェクト単位で決めればいいんだけど、いろいろあるし）


Google HTML/CSS Style Guide

基本全てagreeだわ。html5そんなに省略できんのかとかいろいろあったけど、
気になっとこだけメモ。

Notes

General Style 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>
/* Not recommended */
.example {
  background: url(http://www.google.com/images/example);
}
/* Recommended */
.example {
  background: url(//www.google.com/images/example);
}
CSS Style Rules

・ID and class name delimiters
ハイフン推奨。わしもハイフンの方がしっくりくる。

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


・Property name stops
うん、空白いれますよね。

/* Recommended */
h3 {
  font-weight: bold;
}


・Selector and declaration separation
タグ毎に改行する。
ああ、これはしてなかった。次からやってみる。

/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}
CSS Formatting Rules

alphabet順。
・Declaration order

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;