CSS Methodology

LismがどのようなCSS設計になっているかを説明します。

CSSの階層構造

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

Layer	役割	`@layer`
Settings	SASSの設定変数, mixinなど直接スタイルに吐き出されないもの。	-
Reset	reset CSS	`@lism.reset`
Base	`:root`でのトークン定義, HTML要素に対するスタイルの初期セット	`@lism.base`
Layout State `.is--{state}` `.has--{state}`	レイアウトを組む上で特定の役割を持ち、複数のモジュールに対してつけ外しできるような汎用的な機能。	`@lism.state`
Layout Module `.l--{name}`	基礎的なレイアウトを組むためのモジュール群。レイアウトの構成単位となるようなモジュール。	`@lism.layout`
Dynamic Module `.d--{name}`	動的な機能を持つ特殊なモジュール群。JavaScriptと組み合わせたものなど。	`@lism.dynamic`
Components `.c--{name}`	具体的な役割を持つコンポーネント群。他のクラスだけでは補えないコンポーネント特有のスタイルをまとめる。	`@lism.component`
Utility Class `.u--{name}`	その他、機能やスタイルが明確なユーティリティクラス。	-
Props Class `.-{prop}:{val}`	単一のCSSプロパティティに紐づいたクラス。	-

デザイントークン

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

トークンを流用することで、サイトを通してデザインに一貫性が生まれ、使用しているプロパティの意図も第三者が読み取れるようになります。

あとからサイト全体を微調整する必要が出てきてもトークンの値を変更するだけでよくなり、メンテナンス性も高まります。

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

CSSのクラス設計

Lismでは、レイアウト・デザインの構成要素を細分化していくつかの種類に分類しています。

State Class

分類	形式	例
Layout State 状態として付け外しできるようなデザイン機能を持つもの	`.is\|has--{stateName}`	`.is--container`, `has--gutter`
Temporary State js操作等によって付け外しされるようなクラス	`.-{state}`	`.-active`, `.-opened`

Layout State はそれ単体でスタイルを持ち、Temporary State はそれ単体ではスタイルを持ちません。

Module Class

分類	形式	例
Layoutレイアウトの構成単位となるようなモジュール	`.l--{name}`	`.l--grid`
DynamicJSと組み合わせた動きのあるモジュール	`.d--{name}`	`.d--tabs`
Componentその他のコンポーネント	`.c--{name}`	`.c--card`

Blocks はAtom,Layoutクラスで構成されるような粒度（（他のBlock,Componentが内部に入らない規模）で、Componentは Layout,Atom,Block 等で構成されるような粒度でイメージしてください。

子要素を持つ場合

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

形式: .c--{componentName}__{elementName}
例: .c--hoge__item

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

モジュールのバリエーションスタイルを定義する場合、BEMでの Modifier を付け加えたクラスを作成します。

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

基本的には元となる.{pefix}--{name}も併記し、CSSコードの重複を避けるようにして運用します。

Prop Class

特定のCSSプロパティに対応するユーティリティクラスを定義しています。
基本的にはそれぞれのクラスが単一のCSSプロパティをコントロールするためのになっています。（一部、例外もあります。）

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

形式	説明	例
`.-{prop}:{token\|value}`	各プロパティごとの主要な値やトークンの値を利用するためのユーティリティクラス(*1)	`.-fz:l`, `.-ta:c`
`.-{prop}:`	変数 `--{prop}:` を受け取るためのクラス(*2)	`.-p:`, `.-fz:`
`.-{prop}[:\|@bp]`	変数 `--[bp-]{prop}` を受け取るためのクラス(*3)	`.-p@sm`, `.-p@md`

*1: 全てのトークンにユーティリティクラスがデフォルトで用意されているわけではありません。
*2: 全てのCSSプロパティに対応するクラスがデフォルトで用意されているわけではありません。
*3: ブレークポイントに対応したクラスがデフォルトで用意されているものは一部のプロパティのみです。

↓

上の表で示したクラスは、例えば以下のようなものがあります。

.-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(--sm-p); }
}
@container (min-width: 720px) {
  .-p\@md\:{ padding: var(--md-p); }
}

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

レスポンシブ対応

直前に紹介した.-{prop}[:|@bp]形式のクラスと--[bp-]{prop}形式の変数によって、レスポンシブ対応を行います。

↓

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

BOX

リサイズ可能

<div class="-p:20 -p@sm -p@md -bd:" style="--sm-p:var(--s30);--md-p:var(--s50);">
  BOX
</div>

その他の推奨規則

Lismパッケージに内蔵されているクラスではありませんが、次のような感じで命名すると統一感でると思います。

分類	形式	例
ゾーニング	`.z--{zoneName}`	`.z--header`, `.z--sidebar`, `.z--article`
ページの分類	`.p--{type}--{id\|slug}`	`.p--front`, `.p--archive`, `.p--post--{id}`, `.p--page--{slug}`
ユーティリティ	`.u--{utilityName}`	`.u--hoge`

コンテナクエリ・メディアクエリ

Lismでは、デフォルトでコンテナクエリを採用しています。

そのため、ブレイクポイントで値を切り替えるには、その先祖要素でコンテナ要素を定義しておく必要があります。

（Lism でコンテナ要素を配置するには、.is--container(<Container>)が便利です。）

また、SCSSファイルでカスタマイズを行うことで、メディアクエリに切り替えることもできます。

ブレイクポイント

ブレイクポイントはモバイルファーストで定義しており、数値としては480px~1200pxまでの240px刻みで設定しています。
（特定のデバイスサイズに依存した数値は採用していません。）

サイズ表記	デフォルトの設定値
`sm`	`width >= 480px`
`md`	`width >= 720px`
`lg`	`width >= 960px`
(`xl`)	`width >= 1200px`

(xlサイズのサポートは別途SCSSの設定ファイルの上書きが必要)

これらの定義済みポイントをあなたのプロジェクトで用意したCSSで使用する場合、.scssファイルからであれば次のようにして簡単に利用できます。

@use '../path/to/node_modules/lism-css/scss/query' as query;

@include query.cq('sm') {
  // Your styles for sm sizes(width >= 480px) ...
}
@include query.cq('md') {
  // Your styles for md sizes(width >= 720px) ...
}

補足事項

その他の補足事項を説明します。

命名規則

…

単語の省略について

基本的にはEmmetの省略形で統一するようにしています。

font-size → fz
background-color → bgc
text-align:centerに対応するクラス → .-ta:c

Emmet で明確に定義されていないものは、それっぽく省略しています。

object-fit → obf
row-gap → rowg
place-self → pslf

また、次のように例外 (Emmetと違うもの、Emmetっぽくないもの)もあります。

colg: (column-gap)
- Emmet では colmg だが、column→col, columns → cols とLism全体で揃えている。
aslf, jslf
- Emmet ではas, jsになるが as は Lism Prop と被り、jsは javascript が思い浮かぶので、少し変形しています。
-fxw:nw(flex-wrap:nowrap)
- Emmetに従えば fxw:nだが、whs:nw(white-space: nowrap) と揃えています。