CSS設計

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

Lism CSSの階層構造

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

Layer	役割
Settings	SASSの設定変数, mixinなど直接スタイルに吐き出されないもの。
Base `@lism-base`	Reset CSS、トークン定義や変数セット、要素の初期スタイルをセットするレイヤー。 `.set--{state}`クラスもここで定義されます。
Modules `@lism-modules`	モジュール群を定義するレイヤー。この中でさらにレイヤーが分かれており、 `.is--{state}`, `.l--{layout}`, `.a--{atomic}`, `.c--{custom}` が定義されます。
Utility `@lism-utility`	機能やスタイルが明確なユーティリティクラス`.u--{name}`を定義するレイヤー。
Custom `@lism-custom`	上記のレイヤーより優先しつつ Prop Classよりも詳細度を下げたいスタイルを定義できるカスタマイズ用レイヤー。
Props `-`	単一のCSSプロパティティに紐づいた Prop Class (`.-{prop}:{val}`) 。このクラス群のみ、レイヤーを外して詳細度を高くしつつ、ある程度外部CSSとも共存できるようにしています。

デザイントークン

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

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

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

CSSのクラス設計

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

Set Class

@lism-base層の中で定義される、ベーススタイルの上書きやトークンの再定義、機能的なプロパティを初期セットするためのユーティリティクラスを Set Class として定義しています。

分類	形式	例
Set Class	`.set--{style}`	`.set--plain`, `.set--transition`

Module Class

レイアウトの構成要素を細分化して Module Class として定義しています。

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

分類	形式	例
State Modules 状態として付け外しできるようなレイアウト機能を持つクラス	`.is--{stateName}`	`.is--wrapper`, `.is--container`
Layout Modules レイアウトの構成単位となるようなモジュール	`.l--{name}`	`.l--grid`, `.l--columns`
Atomic Modules レイアウトの最小単位となるモジュール	`.a--{name}`	`.a--divider`, `.a--icon`
Custom Modules その他、より具体的な役割を持つコンポーネント群	`.c--{name}`	`.c--button`, `.c--accordion`

スタイルバリエーションを用意する場合

モジュールのバリエーションを定義する場合、BEMでいうところの Modifier を付け加えたクラスを作成します。
この時、元となるモジュールクラスも併記し、CSSコードの重複を避けるようにして運用します。

形式:.{pre}--{name}--{variant}
例: .c--button.c--button--outline

子要素を持つ場合のクラス名

子要素も含めて一つのモジュールとして機能するものは、BEMでいうところの Element にあたる文字列をクラスに付け加えます。

形式: .{pre}--{componentName}_{elementName}
例: .c--hoge_item

Utility Class

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

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

Prop Class

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

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

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

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

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

↓

例えば以下のようなものがあります。

.-ta\:c { text-align: center; }
.-ta\:l { text-align: left; }
.-fz\:l { font-size: var(--fz--l); }
.-fz\:3xl { font-size: var(--fz--3xl); }

.-p{ padding: var(--p); }
@container (min-width: 480px) {
  .-p_sm{ padding: var(--p_sm); }
}
@container (min-width: 720px) {
  .-p_md{ padding: var(--p_md); }
}

（厳密には異なる形態のものもありますが、イメージとしてはこんな感じです。）

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

レスポンシブ対応の Prop Class

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

↓

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

BOX

リサイズ可能

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

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

その他の推奨規則

Dynamic Attributes

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

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

独自クラスの命名について

Lismパッケージに内蔵されているクラス群ではないものをどうするかについては、明確な定めはありません。

プレフィックスをLismに寄せて統一感を出すか、もしくは独自クラスであることを明確にす　るためにプレフィックスをつけない、というのがおすすめです。
（コンポーネントクラスは @lism-modulesでc--として定義するのを推奨しています。）

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

命名規則について

CSS変数の命名規則

変数名の各ブロックはキャメルケースで、--{varName}のように表現します。

トークン値

カラー: --{color}。例: --brand, --text, --link, --red
スペーシング: --s{Token} の形式をとります。例: --s10, --s40
その他、特定のプロパティ等に対するバリエーションを示すものは、--{prop}--{token}の形式て表現します。
- font-size: --fz--s, --fz--base, --fz--l
- --hl: --hl--s, --hl--base, --hl--l
- border-radius: --bdrs--10, --bdrs--20
- box-shadow: --bxsh--10, --bxsh--20
- サイズトークン: --sz--{size}。例: --sz--s, --sz--m, --sz--l

トークンのバリエーション表現規則について

s, l, xl などによるサイズ表記
- 基本となるベース値（base）または中心値 m があって、それに対して小さいか？大きいか？というのを表すトークンはこの表記になります。
- :root(html),bodyにセットされている値に戻すためのものは base、そうでないが基本的な中心値となるものはmで表現します。
10, 20, 30,… などの数値による段階表記
- 0(none)が基準で、段階的に値を持つトークンはこの表記になります。
その他
- それぞれのプロパティに合うように、セマンティックなトークン名を定義します。
- 例: --ar--og

カラートークンのバリエーションについて

base/text に対する base-2/text-2 についての補足です。
これらはサイトのカラー設計するときにその都度意味合いが変わり得るものなので、意味付けを避けています。

単純に数値でのバリエーション表現にすることで、サイトによってはbase-3,text-3のように増やしていくこともできるようにしています。

Props Class 用の変数名

Propクラスに対応するカスタムプロパティは--{prop}で表現し、クラス名と同じ省略形で表現します。
- 例： --p, --mx, --c, --bgc, --bdrs
Propクラスのブレイクポイント値は-{prop}_{bp}で表現します。
- 例: --p_sm, --mx_md

要素に対する変数名

:rootで初期値を上書き可能で、かつ、特定の要素・クラスに対するプロパティは--{target}-{prop}の形式で表現します。
- 例: --link-td, --heading-ff, --gutter-size, --under-offset, --hl-unit, --ov-bgc
コンポーネント・モジュールクラスの主要機能を担うプロパティに対する変数は、--{propName}のように単一ブロックで表現します。
- 例:.l--sideMainの--sideW,--mainW
- ※ Prop Class として定義されているプロパティの場合、同じ変数名を利用して上書き可能にします。
  - 例: .c--buttonの--c,--bgc
特定のコンポーネント・モジュールの子要素（c--hoge_itemなど）に対するプロパティは--_{item}-{propName}の形式で表現します。
- 例: --_icon-size
特殊な状態管理に使うような変数は、--_{varName}のように_で始まり、キャメルケースで1ブロックにまとめます。
- 例: --_isHov, --_notHov

クラスの命名規則

プレフィックスについて

l--, a-- など、ハイフンが2つ（--) 繋ぎのものは、同階層のクラスは同じ要素に使用できないことを示します。
set-, is-, u- などハイフンが一つで始まるものは、同階層を同じ要素に使用できることを示します。

-{prop}:{value}の{value}部分について

小数点が付いた値 → .のままで。(CSS側で\使う必要あり)
- 例: .-prop:1.5
ネガティブ(マイナス)値の表記もそのままで。
- 例: .-prop:-1

単語の省略について

Prop Class-{prop}:{value}と、それに対応したCSS変数やコンポーネントで指定できるプロパティのキー名の省略ルールについて、{prop}側と{value}側の2つについてそれぞれの省略ルールを説明します。

`{prop}`部分について

レイアウト・タイポグラフィ・カラーに関わる主要なプロパティは、 Emmet のような 1~3文字への極端な省略名を用います。

font-size → fz
background-color → bgc
padding → p
flex → fx
grid-template-columns → gtc

その他のプロパティは、そのままか、もしくは容易にプロパティが予測できる範囲で省略します。ただし、元になるプロパティ名に入っているハイフン(-)は一部例外ルールを除いて基本的に全て省略します。

clear → clear
white-space → whspace
writing-mode → writing

max-, min-プロパティは、そのままハイフンを使います。

max-width → max-w
min-width → min-w
max-height → max-h
min-height → min-h

方向指定系のプロパティについて

また、方向指定プロパティも-で繋げて、{prop}-{side}ような命名規則になります。
ただし、p,m のみ、 (pt,px)などの書き方がすでに一般的なため、最初のハイフンを省略します。

対象プロパティ	省略形
`gap`	`g`
`column-gap`	`g-x`
`row-gap`	`g-y`
`overflow`	`ov`
`overflow-x`	`ov-x`
`border`	`bd`
`border-left`	`bd-l`
`border-inline`	`bd-x`
`border-inline-start`	`bd-x-s`
`padding`	`p`
`padding-inline`	`px`
`padding-inline-start`	`px-s`
`margin`	`m`
`margin-top`	`mt`
`margin-block`	`my`
`margin-block-start`	`my-s`

`{value}`部分について

{value}部分については、基本的には極端な省略はせず、{prop}部分が極端に省略されていても{value}部分があればその組み合わせを見てどのプロパティを示すか予測しやすいようになっています。

長いキーワード値のみ、意味がわかる程度に省略します。

display:noneに対応するクラス → .-d:none
display:inline-flexに対応するクラス → .-d:in-flex
position:relativeに対応するクラス → .-pos:rel
text-align:centerに対応するクラス → .-ta:center