CSS の命名について

  • class 名はデザインから決めるのではなく、「何処で」「何を表現」するのかを端的な名前で表す。
  • 単語をつなぐ場合は-を用いる
  • component の Class には接頭語.c-*を用いる
  • Wrapper 層にあたる CSS には接頭語.w-*を用いる
  • Layout 層にあたる CSS には接頭語.l-*を用いる
  • utility にあたる CSS には接頭語.u-*を用いる

SCSS

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

その他

禁止事項
  • id要素をセレクタにして style を当てるのを禁止