『ぐだぐだ言ってないでコードを書けよ、ハゲ』って言われてるけど :: コードを書く前にコレを読んだのかよ?

まだハゲじゃない。

ボクは CSS を書き散らかす癖があるので、真面目に読んでみたところお勉強になったので、翻訳と独自解釈で日本語化してみました。

【注意】

ちょっとだけサンプルの順番を改変してありますし、意訳がすぎる場合があるので、気になる方は原文をどうぞ

google-styleguide - Style guides for Google-originated open-source projects - Google Project Hosting

CSS のフォーマットルール

デコレーションの順番

アルファベット順にしましょう
アルファベット順にしておけば保守も簡単だし、一貫したコードになります
ベンダープレフィックスがある場合は、ソートした状態でまとめておきましょう

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

※個人的にはborder-radiusの並べ方はこのようにしたい

        border-radius: 4px;
   -moz-border-radius: 4px;
-webkit-border-radius: 4px;

ブロック内部もインデントしよう

すべてのブロックの内容をインデントしよう
階層の内容も理解しやすいよ

@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

※内容を把握しやすくする場合には、中括弧で入れ子にしてあげてもいいですね

値の後にセミコロンをつけよう

/* 改善前 */
.test {
  display: block;
  height: 100px
}

/* 改善後 */
.test {
  display: block;
  height: 100px;
}

※改善後では値である 100px の後ろにセミコロンを

プロパティと値を分けるコロンの後ろにスペースをあけよう

/* 改善前 */
h3 {
  font-weight:bold;
}

/* 改善後 */
h3 {
  font-weight: bold;
}

※改善後では値である bold の前に半角スペースがあいています

ブロックの分け方

セレクターとブロックの左中括弧にスペースをあけよう
ブロックの左中括弧は、セレクターの後ろにおこう
セレクター（コメント）の後ろは一行ずつあけよう

/* 改善前: スペースがあいていない */
#video{
  margin-top: 1em;
}
/* 改善前: 行が開きすぎ */
#video
{
  margin-top: 1em;
}

/* 改善後 */
#video {
  margin-top: 1em;
}

※改善後では、セレクターと左括弧が同じ行におかれ、スペースもとられている

セレクターの分け方

セレクターは一行ずつ書きましょう
プロパティも一行ずつ

/* 改善前 */
a:focus, a:active {
  position: relative; top: 1px;
}

/* 改善後 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

※セレクターもプロパティも一行ずつ書かれている

CSS のクォーテーションマーク

URL 値を囲むときはクォーテーションマークは不要です
属性セレクタやプロパティはシングルクォーテーションマークで囲いましょう
- 例外: @を使わない場合にはダブルクォーテーション使ってもいい場合があります
  - …ダブルクォーテーションを使うな、ということ

/* 改善前 */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}
/* 改善後 */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

セクションのコメント

おおまかに分かれるグループがあるなら、コメントを使ってグループを作ろう

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

コードを書く前に、必ず読んで欲しい本

なにより大事なのはコードに一貫性があること。

コードに一貫性がないと、読んだときに「なんでここだけ、こうなってるんだろう？」みたいな疑問が湧いたりします。
そうして読むのに時間がかかったり、間違えて読んでしまったりします。
また、チームで作業しているときは、チーム内で一貫性を持った書き方をしましょう。

ってなことが、書いてある良書です。
何度読んでもためになるし、こんな文化を会社に持ち込みたい！と思わずにはいられない。

今度、『夏休み中にエンジニアデビューしたい人が読むべき本 :: 厳選 7 冊』みたいなエントリー書こうかな。

けれども

正直、コードを整えるなんてことは IDE やコードエディターで設定してあげて、フォーマッターを使えば、一瞬でやってくれることも多いです。
例えば Netbeans ではオプション -> エディタ -> フォーマットで細かく設定できます。

それでも整えていない人がいるから、困ったもんだよね、ってことですよね。

名言『ぐだぐだ言ってないでコードを書けよ、ハゲ』はこちらからお借りしました

こちらも良書。
コーディングやアイデア出しに疲れた時に読むと、「がんばろ」と思える心の栄養ドリンク的な本です。

kwsktr's study log

kwsktr のおべんきょログ