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 を当てるのを禁止