A-Listers

コードが適切に整形されているかどうかはデザイナーやエンジニアなどコードを書く人にとっては日常的な課題のひとつです。プログラミング言語やツールに応じて様々なコーディング規約によって正しいコードの書き方が定義されていますが、GitHubが社内で利用しているコーディング規約を「スタイルガイド」としてサイト上で公開しています。

このスタイルガイドは5個のセクションに分かれています。

• 概要
• スタイリング(CSS)
• マークアップ(HTML)
• ビヘイビア(JavaScript)
• Ruby

GitHubということで様々なRubyのツールとの組み合わせが前提になっている部分もありますが、CSSに対しての規約は例えば下記のようになっています。

• インデントはスペース2つのソフトタブを使う
• プロパティ宣言の:の後にはスペースを空ける
• 宣言の{の前にはスペースを空ける
• カラーコードはrgbaを使わない場合は数字で指定する
• コメントは//を使う
• KSSのドキュメントに従う
• font-sizeにはpxを使う

実際のコードの例だと下記のようになります。

// This is a good example!
.styleguide-format {
  border: 1px solid #0f0;
  color: #000;
  background: rgba(0,0,0,0.5);
}

またクラスやidの設定については「ページ中に一度しか表示しないものはidに、そうでない場合はclassにする」との事でこれも実例が示されています。

• 良いidの例:header, footer, modal popups
• 悪いidの例:navigation, item listings, item view pages

コンポーネントを作る場合はエレメント＋クラスの組み合わせを使う方がidによる指定よりも好ましく、良い例が下記のようになります。

<ul class="category-list">
  <li class="item">Category 1</li>
  <li class="item">Category 2</li>
  <li class="item">Category 3</li>
</ul>

ul.category-list { // element + class namespace

  &>li { // direct descendant selector > for list items
    list-style-type: disc;
  }

  a { // minimal specificity for all links
    color: #ff0000;
  }
}

idを使った指定をする際は同時に複数適用する事が無いように注意します。例えばdisabled, mousedown, danger, hover, selected, and activeといったものは常にclassであるべきです。

まだまだ各種ツールの紹介やHTML、JavaScriptなどについての記述もあるのですが今回はここまでにしておきます。とても参考になりますので皆さんも目を通してみてください。

via:https://github.com/styleguide/css