CSS設計

このページでは、LismがどのようなCSS設計になっているかを説明します。

Lism CSSの階層構造

詳細度が複雑になりがちな問題への対策として、LismではCSSの階層構造を明確に定義しています。

Layer	役割
Settings	SASSの設定変数, mixinなど直接スタイルに吐き出されないもの。
Base `lism-base`	Reset CSS、トークン定義や変数セット、要素の初期スタイルをセットするレイヤー。 `set--{state}`クラスもここで定義されます。
Trait `lism-trait`	要素に「役割」や「機能」を宣言的に付与するクラス群（`is--{name}`, `has--{name}`）を定義するレイヤー。
Primitives `lism-primitive`	レイアウトを組み立てるための積み木となる Primitive 群を定義するレイヤー。 `l--{layout}`, `a--{atomic}` がここで定義されます。
Components `lism-component`	BEM 構造を持つ UI 部品（`c--{name}`）を定義するレイヤー。コアの `lism-css` には含まれず、`@lism-css/ui` パッケージやユーザー定義の `c--*` クラスがここに配置されます。
Custom `lism-custom`	ユーザーが Lism の既存クラスを上書きしたい場合や、独自プレフィックス（`z--{zone}`, `p--{page}` 等）のクラスを配置するためのカスタマイズ用レイヤー。
Utility `lism-utility`	機能やスタイルが明確なユーティリティクラス`u--{name}`を定義するレイヤー。
Props `-`	単一のCSSプロパティに紐づいた Property Class (`-{prop}:{val}`) 。このクラス群のみ、レイヤーを外して詳細度を高くしつつ、ある程度外部CSSとも共存できるようにしています。

デザイントークン

タイポグラフィ、余白、カラー、シャドウなど、主要なプロパティに対して段階的なプリセット値やセマンティックなキーワードでCSSカスタムプロパティを定義しています。

トークンを流用することでデザインに一貫性が生まれ、使用しているプロパティの意図も読み取りやすくなります。また、あとからサイト全体を微調整する必要が出てきてもトークンの値を変更するだけでよくなり、メンテナンス性も高まります。

詳しくはトークン解説ページを参照してください。

デザイントークン

Lism CSS で定義されているカラー、スペーシング、シャドウなどのデザイントークン一覧を紹介します。

CSSのクラス設計

Lism CSS の中心的なクラス群について、その設計思想を説明します。

Set Class

lism-base 層の中で定義される、HTML 要素の基礎スタイリングや変数セットを行うためのユーティリティクラスを Set Class として定義しています。

分類	形式	例
Set Class	`set--{style}`	`set--plain`, `set--var:hov`, `set--var:bxsh`

Primitive Class

レイアウトを組み立てるための小さな積み木として Primitive Class を定義しています。

さらにその中で、いくつかの種類に分類しています。

分類	形式	例
Layout Primitives レイアウトの構成単位となる Primitive	`l--{name}`	`l--grid`, `l--columns`
Atomic Primitives レイアウトの最小単位となる Primitive	`a--{name}`	`a--divider`, `a--icon`

Primitive クラスはバリエーションや子要素クラスを持たない、単体で機能するクラスです。BEM 構造を持つのは次に紹介する c-- の Component Class のみです。

また、Primitive 同士の併用は以下のルールに従ってください。

組み合わせ	可否	備考
`l--` × `l--`	NG	同カテゴリの併用は不可
`a--` × `a--`	NG	同カテゴリの併用は不可
`l--` × `a--`	非推奨	役割的には同居しない想定

Trait Class

要素に「役割」を宣言したり、「機能」を付与するためのクラスを Trait Class として定義しています。

分類	形式	例
`is--` Trait 要素に役割（〜である）を宣言する	`is--{name}`	`is--container`, `is--wrapper`, `is--layer`, `is--boxLink`
`has--` Trait 要素に機能（〜を持つ）を付与する	`has--{name}`	`has--transition`, `has--gutter`, `has--snap`

is-- と has-- の判定軸は次の通りです。

	`is--`	`has--`
意味	〜である（役割・存在の宣言）	〜を持つ（機能の付与）
CSS 変数	必須ではない	必須（カスタマイズポイントを提供）

詳しい使い分けや判断軸については命名規則ページも参照してください。

Component Class

c-- プレフィックスで定義する Component Class は、Primitive を組み合わせて作られる具体的なUIコンポーネントです。
コアの lism-css には含まれず、@lism-css/ui パッケージで一部提供しています。

また、c-- クラスはユーザーが@layer lism-component にて自由に定義できます。

@layer lism-component {
  .c--card { /* ... */ }
  .c--pricing { /* ... */ }
}

c-- クラスは BEM 構造（Block / Modifier / Element）を持つことができ、それぞれ次のような形式で定義します。

分類	形式	例
Block 本体クラス	`c--{name}`	`c--button`, `c--card`
Modifier バリエーション	`c--{name}--{modifier}`	`c--button--outline`
Element 子要素	`c--{name}_{element}`	`c--card_header`, `c--card_body`

Modifier は .c--button.c--button--outline のように Block クラスと併記して使います。
Element は _（アンダースコア）一つ区切りです。

Blockの併用（.c--xxx.c--yyy）は基本 NG ですが、次の組み合わせは許容されます。

Block と Modifier の併用: .c--xxx.c--xxx--variant
Block と他の Block の Element の併用: .c--xxx.c--yyy_elem

Utility Class

装飾・機能として用途が明確なユーティリティクラスを次のように定義しています。

分類	形式	例
Utility Class	`u--{style}`	`u--cbox`, `u--trim`

Property Class

Lism CSS では、単一のCSSプロパティに対応するユーティリティクラスを Property Class として定義しています。

主要なプロパティに対して、よく使われる値や専用のトークン値に合わせたユーティリティクラスを定義しており、レスポンシブ対応できるようになっています。

Prop クラスには以下の3種類の形式があります。

形式	説明	例
`-{prop}:{value}`	各プロパティごとの主要な値やトークンの値を利用するためのユーティリティクラス	`-fz:l`, `-d:none`
`-{prop}`	変数 `--{prop}` を受け取るためのクラス	`-p`, `-fz`
`-{prop}_{bp}`	変数 `--{prop}_{bp}` を受け取るためのクラス	`-p_sm`, `-p_md`

* 全てのCSSプロパティに対応するクラスがデフォルトで用意されているわけではありません。
* ブレークポイント対応クラスも、さらにその中で主要な一部のプロパティのみ標準でサポートされています。

詳しくはProperty Class 一覧ページを参照してください。

Property Class

CSSプロパティに紐づいた Property Class の一覧とその使い方について解説します。

レスポンシブ対応の Property Class

直前に紹介した-{prop}_{bp}形式のクラスと--{prop}_{bp}形式の変数によって、レスポンシブ対応を行えるようになっています。

↓

実際の活用例は次の通りです。

BOX

リサイズ

<div class="-p:20 -p_sm -p_md -bd" style="--p_sm: var(--s40); --p_md: var(--s50)">BOX</div>

詳しくはレスポンシブ対応解説ページを参照してください。

Prop Responsive

Lism CSS におけるブレイクポイントとレスポンシブ対応の仕組みについて解説します。

独自クラスの命名と定義場所

その他、Lism CSS の各クラス分類（set--, is--, has--, l--, a--, u--, -{prop}:{value}）に合致する独自クラスを追加する場合は、同じプレフィックスを用いてそれぞれの定義レイヤーに追加するようにしてください。

なお、Lism の既存クラスを上書きしたい場合は、該当するレイヤー内で行ってください。

例えば、set-- クラスの再定義は @layer lism-base で行います。この時、lismのmain.cssよりあとで読み込むスタイルで定義するか、.set--xxx.set--xxx のように同じクラス名を続けることで優先度をあげるなどして上書きすること。

@layer lism-base {
  /* 新規追加 */
  .set--hoge { /* ... */ }

  /* 上書き */
  .set--plain.set--plain { /* ... */ }
}

独自分類の追加

Lismが定義するクラス群のどれとも合致しないプレフィックスを用意しても構いません。

分類の例	形式	例
ゾーニング	`z--{zoneName}` または `{zoneName}`	`z--header`, `z--main`, `z--sidebar`
ページの分類	`p--{type}-{id\|slug}` または `{slug}Page`など	`p--front`, `p--page--{slug}`

これらを定義する場合は、 @layer lism-custom に配置してください。

@layer lism-custom {
  .z--header { /* ... */ }
  .p--front { /* ... */ }
}

動的な状態管理はdata属性

Javascriptで動的に付け外しされるような状態管理には、data属性を使用します。

例: [data-opened], [data-active]