CSSガイドライン

• ケバブケースを使う。
• Modifierはハイフン2つで接続（button--infoなど）
• 略語禁止（btnはダメで、button）
• 連番を使う場合、最初に番号を振るのは禁止
• マルチクラス採用
• よく使うクラスは、ユーティリティクラスとして切り出す。（.u-p64など、優先的に効いてよいので、importantをつける。）
• line-heigtは単位なし。
• letter-spacingはem
• グローバルのカスタムプロパティで、色、幅、z-indexなどは定義しておく。

プレフィクス

l-

レイアウト

• l-header(ヘッダーはレイアウトなので)
• l-footer

c-

コンポーネント

使いまわすことが多いものはつける。（c-modalなどのように。）

ページ名-(top-など)

ページ、ページ名をつけることでそのページでしか使ってないことが一目でわかる。

u-

ユーティリティ、よく使うスタイルを外だしする。

注意点としては、ユーティリティはパーツではない。あくまでデザインユーティリティ。コンポーネントとは違う。

is-

状態を表すクラス

js-

jsで操作するためにつけるkルアス。document.querySelector(".js-modal")など。分けておくことでこれはjsでしか使わないクラスなんだと理解することができるため。

グローバルのカスタムプロパティ

l-container

以下のような指定してつけるだけでレイアウトが整うようにしておく。

z-index

カスタムプロパティ(--z-index-modalなど)で用意しておくとよい。

modal:100

header:30

menu:10

default:1