CSS の命名について
- class 名はデザインから決めるのではなく、「何処で」「何を表現」するのかを端的な名前で表す。
- 単語をつなぐ場合は
-を用いる - component の Class には接頭語
.c-*を用いる - Wrapper 層にあたる CSS には接頭語
.w-*を用いる - Layout 層にあたる CSS には接頭語
.l-*を用いる - utility にあたる CSS には接頭語
.u-*を用いる
SCSS
- Mixin
- 自作した mixin は
src/assets/css/config/の中で_mixin.scssを作りまとめる。- 接頭語
mx-*をつける
- 接頭語
- 自作した mixin は
- Extend
- 自作した extend は
src/assets/css/config/の中で_extend.scssを作りまとめる。- extend は接頭語
ex-*をつける _extend.scssの中には元のスタイルを CSS に出さないようにプレイスホルダーセレクタ%を利用して書く。
- extend は接頭語
- 自作した extend は
その他
- 禁止事項
id要素をセレクタにして style を当てるのを禁止