CSSスタイルルール - growgroup/grow-template GitHub Wiki

6. CSS スタイルルール

CSSの基本的な設計手法としては FLOCSS を用いて行う。

https://github.com/hiloki/flocss

6.1 CSSバリデーション

可能な限り、適切なCSSを書く。 W3C CSS validatorなどのツールを使用してテストする。

6.2 IDを利用しない

特別な理由がない限り IDによるスタイル定義を禁止する。

6.3 IDとClassの命名

理解しやすく、一般的な命名を行う。

/* 非推奨: 意味が無い */
#c-yee-1901 {}

/* 非推奨: 見た目を表す */
.c-button-green {}
.c-clear {}

/* 推奨: 具体的 */
.c-gallery {}
.c-login {}
.c-video {}

/* 推奨: 一般的 */
.c-aux {}
.c-alt {}

6.4 ID名とクラス名のスタイル

ID名とクラス名は可能な限り短くすること。ただし、必要であれば長くなっても構わない。

/* 非推奨 */
.c-navigation {}
.c-atr {}

/* 推奨 */
.c-nav {}
.c-author {}

6.5 タイプセレクタ

ID名とクラス名にタイプセレクタを使用するのは避ける。パフォーマンスの理由からも、不必要な子孫セレクタを使用するのは避ける。

/* 非推奨 */
ul.c-example {}
div.c-error {}

/* 推奨 */
.c-example {}
.c-error {}

6.6 ショートハンドプロパティ

可能な限りショートハンドプロパティを使用する。 CSSは様々なショートハンドプロバティを提供している。

/* 非推奨 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* 推奨 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

6.7 0と単位

0の後の単位は省略する。

margin: 0;
padding: 0;

6.8 小数点の値の始めの数字が0の場合

先頭の0は省略する。

font-size: .8em;

6.9 HEX形式の色指定

可能であれば3文字の色コードを使用する。

/* 非推奨 */
color: #eebbcc;

/* 推奨 */
color: #ebc;

6.10 接頭詞(任意)

大きなプロジェクトの場合にIDやclass名が重複しないよう、固有の接頭詞を付ける。

.c-adw-help {} /* AdWords */
.c-maia-note {} /* Maia */

6.11 ID名、class名の区切り文字

ID名とクラス名はハイフン(-)を使用して単語を区切る。

/* 非推奨: “demo” と “image” の間にハイフンが入っていない。 */
.c-demoimage {}

/* 非推奨: アンダースコアは使用しない。ハイフンを使用する。 */
.c-error_status {}

/* 推奨 */
.c-video-id {}
.c-ads-sample {}

6.12 ハック

CSSを使用したユーザーエージェントの判定は避ける。違うアプローチを先に試す。

6.13 CSS書式ルール

6.13.1 プロパティを記述する順番

アルファベット順に記述する。(prefixは除外だが、-mozは-webkitの前に来るなどの順番は守る)

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

6.13.2 ブロック単位のインデント

階層がわかるようにブロック単位でインデントする。

@media screen, projection {

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

}

6.13.3 宣言の終止符

宣言の後ろに毎回セミコロン(;)を付ける。

/* 非推奨 */
.test {
  display: block;
  height: 100px
}

/* 推奨 */
.test {
  display: block;
  height: 100px;
}

6.13.4 プロパティ名の終止符

プロパティ名のコロン(:)の後ろにスペースを一つ入れる。

/* 非推奨 */
h3 {
  font-weight:bold;
}
/* 推奨 */
h3 {
  font-weight: bold;
}

6.13.5 ブロックと宣言の分離

セレクタ名の後ろにスペースを一つ入れる。

/* 非推奨: スペースがない */
#video{
  margin-top: 1em;
}

/* 非推奨: 改行は必要ない */
#video
{
  margin-top: 1em;
}
/* 推奨 */
#video {
  margin-top: 1em;
}

6.13.6 セレクタと宣言の分離

それぞれのセレクタと宣言を改行する。

/* 非推奨 */
a:focus, a:active {
  position: relative; top: 1px;
}
/* 推奨 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

6.13.7 ルールの分離

ルールとルールの間は1行空ける。

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

6.13.8 CSS引用符

属性セレクタやプロパティ値の引用符にはシングルクォーテーション(')を使用する。 URI値には引用符を使用しない。例外: @charsetを使用する必要がない場合は、シングルクォーテーションは許可されない為、ダブルクォーテーションを使用する。

/* 非推奨 */
@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;
}

6.14 CSSメタルール

セクションのコメント(任意)

可能であれば、セクションのかたまり毎にコメントを書く。セクションの区切りに改行を入れる。

/* Header */

.c-adw-header {}

/* Footer */

.c-adw-footer {}

/* Gallery */

.c-adw-gallery {}

6.15 レイアウト手法

CSSでのレイアウトで極力float は利用しない。Flexboxを利用してレイアウトを行うこと。また、justify-content: space-between をグリッドを再現することは禁止する。

6.16 連続するコンポーネントに対するスタイリング

繰り返し要素のスタイルはモディファイアをつけるのではなく :nth-child を使用すること。