CSS設計

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

Lism CSSの階層構造

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

Layer	役割
Settings	SASSの設定変数, mixinなど直接スタイルに吐き出されないもの。
Base `lism-base`	Reset CSS、トークン定義や変数セット、要素の初期スタイルをセットするレイヤー。 `set--{name}`クラスもここで定義されます。
Block `lism-block`	サイト共通で繰り返し使う基礎部品（`b--{name}`）のベーススタイルを、ユーザーが `@layer lism-block` に定義するためのレイヤー。コアはレイヤー順序を宣言するだけで、スタイル定義は持ちません。後述のレイヤーより弱い位置にあるため、明示的に付与したクラス（`is--` / `has--` / `l--` など）が `b--` のベーススタイルに必ず勝ちます。
Trait `lism-trait`	要素に「役割」や「機能」を宣言的に付与するクラス群（`is--{name}`, `has--{name}`）を定義するレイヤー。
Primitives `lism-primitive`	レイアウトを組み立てるための積み木となる Primitive 群を定義するレイヤー。 `l--{layout}`, `a--{atomic}` がここで定義されます。
Custom `lism-custom`	ユーザーが Lism の既存クラスを上書きしたい場合や、独自クラス（`c--{name}`）を配置するためのカスタマイズ用レイヤー。
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--{name}`	`set--plain`, `set--hov`, `set--bxsh`

Primitive Class

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

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

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

Primitive Class はバリエーションや子要素クラスを持たない、単体で機能するクラスです。BEM 構造を持つのは、後述の Block Class（b--）と Custom Class（c--）のみです。

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

組み合わせ	可否	備考
`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変数	必須ではない	必須（カスタマイズポイントを提供）

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

Block Class

b-- プレフィックスで定義する Block Class は、サイト共通で繰り返し使う基礎部品（ボタン・バッジ・カード級）のためのクラスで、「ベーススタイルをCSS側で管理する」ものとして定義しています。

@layer lism-block {
  .b--btn { /* ... */ }
}

コアの lism-css は専用レイヤー(@layer lism-block)を用意するだけで、b--クラスを提供していません。

b-- は、次の3つをすべて満たす部品にだけ使ってください。

サイト内の複数ページ・複数箇所で繰り返し使う共通部品である。
クラスを1つ付けるだけでベーススタイルがほぼ決まるようにしたい部品である。
粒度がボタン・バッジ・カード級の自己完結した部品である。

これらを満たさない場合は c-- にします。

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

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

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

本体クラス同士の併用（.b--xxx.b--yyy）は基本 NG です。

b-- は他クラスと併用もできます。すべて CSS 側に書かなくてはいけないというわけではありません。
b-- はレイアウトスタイルも CSS 側で持てますし、l-- 系クラスとの併用を前提にして組むこともできます。
ブレイクポイント切り替え（-p_sm 等）、hover 系スタイル、その他例外的な調整には Property Class が便利です。

Custom Class

c-- プレフィックスで定義する Custom Class は、Lism 本体に含まれない、ユーザーが自由に定義できるカスタムクラスです。
名前は lism-custom レイヤーと対応しており、コンポーネント・サイトの領域（ヘッダーやサイドバーなど）・ページ固有の要素など、粒度を問わず使えます。

スタイルは Lism が提供する他のクラスを中心に組み立てるのが基本方針です。
Property Class 等で対応しきれない複雑なスタイル等は、@layer lism-custom に定義します。
CSSを書かずに「何のパーツか」を示す名前付けとしてだけ使うこともできます。

@layer lism-custom {
  .c--header { /* ... */ }
  .c--pricing { /* ... */ }
}

名前はプレフィックスに続けて camelCase で付けます（命名規則を参照）。ページ固有の要素は c--landingHero のようにページのslug等を含めると、名前だけでどこの要素かわかります。

また、c-- クラスは、Block Class と同じ BEM 記法・併用ルールで BEM 構造（Block / Modifier / Element）を持つことができます。

Utility Class

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

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

Property Class

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

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

Property Class には以下の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>

<Box p={[20, 40, 50]} bd>
  BOX
</Box>

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

レスポンシブ対応

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 { /* ... */ }
}

動的な状態管理はdata属性

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

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

Core ConceptsCSS設計

Lism CSSの階層構造

デザイントークン

CSSのクラス設計

Set Class

Primitive Class

Trait Class

Block Class

Custom Class

Utility Class

Property Class

レスポンシブ対応の Property Class

既存クラスの追加・上書き

動的な状態管理はdata属性

CSS設計