Skip to main content

CSS の命名について

class 名は下記のような優先順位を持つ

  • 目的を説明する言葉を優先する
  • 範囲を記述することを優先する
  • 名称を省略をしない
  • バリエーションを統一するために慣習を好む
  • 関係を記述するための慣習を優先する
.mediaSet // 'Set' ->; 目的, 'media' -> 範囲 (ビデオ、画像、imgに適用可能)
.mediaSet--grid-md // '--' ->; 慣例によるバリエーション, 'grid' -> 目的 , 'md' -> 範囲 (省略可能)
.mediaSet--theme-dark // '--' ->; 慣例によるバリエーション, 'theme' -> scope, '-dark' -> variation
  • 特定の Status をつなぐ場合は-,または--を用いる
  • ステートフルなクラス名は.is-*を使用する（否定する場合は.isNot-* ）
    • 子要素によって決まる状態のものは.has-*を使用する否定する場合は.hasNot-* ）
  • JavaScript 用のセレクターとして使う場合.js-*を使用する（data 属性を使っても良い。
  • JavaScript で Style を変更する必要がある場合.ui-を使用する

誤解を与えない命名のために​

プロパティが変更されても開発者に誤解を与えないようなクラスを書くように心がけます。

// Bad 色を指定した名前を使わない
.button--yellow {
  color: yellow;
}

//Good 目的に合わせた命名をする
.button--warn {
  color: yellow;
}
// Bad 特定のHTML要素のみでの利用を提案することは避ける
 .imgFloatLeft {
  float: left;
 }

//Good コンテンツの種類に応じた使い方を提案してみる
.rtfMedia--left{。
 float: left;
}

CSS プリプロセッサ​

変数名​

  • この変数は色のための変数の場合colorを含むようにする
  • 変数名が変数値を示さないようにする（値が変わっても問題無いようにするため）
    • 色相、明るさ、暗さなど、値の意味のある部分を示す。
    • 明るさ、暗さのバリエーションには、関係詞と最上級詞（er, est）を使用するのが好ましい。
    • 色数が多い場合はblie.500など数字を用いた管理でも良い
Good
--colorNeutralDarkest
--colorNeutralDarker
--colorNeutralDark
--colorWarmDarker
--colorWarmerDarkest

変数名は「何をするか」ではなく「どのように使われるか」を示すものが好まれ、その変数の値に関する情報を入れないようにします。

Good
// UI要素名から始める
$linkColor: rgb(165, 220, 220, 220);

// 途中からより具体的な用途で使うことを示す
-linkcolor: var(--colorCoolDark);

// 影響するCSSプロパティを最後に持ってくる
$formControlVerticalPadding: 0.375em;

状態など変数名同士が密接な関係を保つ場合は関係が特定できる近さでまとめて書く。

Good

// UI要素名から始める
$linkColor: rgb(165,220,220);

// ↑影響するCSSプロパティ名を追加します。
$linkColorHover: rgb(165,165,220)。

// 影響するCSSプロパティを最後に持ってくる
-linkColorFocus: var(--colorCoolDarker);

一箇所しか使われない Class 名の場合その Class 名から始め特定のスコープで使用されることを意味させる。

Good
.foo {
  // その変数が使われているclass名で始める。
  $fooHeight: $containerHeight / 3;

  // 影響するCSSプロパティを最後に持ってくる
  width: $fooHeight / 2;
  height: $fooHeight;
}

参考

Mixin​

  • 自作した mixin はsrc/assets/css/config/ の中で_mixin.scss を作りまとめる。
    • 接頭語mx-* をつける

Extend​

  • 自作した Extend はsrc/assets/css/config/ の中で_extend.scss を作りまとめる。
    • Extend は接頭語ex-*をつける
    • また_extend.scss の中には元のスタイルを CSS に出さないようにプレイスホルダーセレクタ% を利用して書く。

その他​

禁止事項​

  • id 要素をセレクタにして style を当てる事
  • HTML タグを Selector にする事
Last updated on