読者です 読者をやめる 読者になる 読者になる

kwsktr's study log

kwsktr のおべんきょログ

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

まだハゲじゃない。


ボクは 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 では オプション -> エディタ -> フォーマット で細かく設定できます。


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


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


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