CSS Methodology

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

Lism CSSの階層構造

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

Layer	役割
Settings	SASSの設定変数, mixinなど直接スタイルに吐き出されないもの。	-
Reset `@lism.reset`	reset CSS
Base `@lism.base`	トークン定義や変数セット、HTML要素の初期スタイルをセットするレイヤー。 Base Set Utility (`.set--{syle}`) クラスもここに入ります。
Modules `@lism.modules`	モジュール群を定義するレイヤー。この中でさらにレイヤーが分かれており、 `.is--{state}`, `.l--{layout}`, `.d--{dynamic}` が定義されます。
Custom Modules `@lism.custom`	その他、ユーザーが定義する具体的な役割を持つカスタムモジュール・UIコンポーネント群 (`.c--{modules}`) 。
Utility `@lism.utility`	その他、機能やスタイルが明確なユーティリティクラス`.u--{name}`を定義するレイヤー。
Props `-`	単一のCSSプロパティティに紐づいた Prop Class (`.-{prop}:{val}`) 。レイヤー外で定義します。

Prop Class は、レイヤーから外すことで外部CSSとある程度共存できるようにします.

Modules レイヤーでのさらなる階層構造

Module Layer	役割
State Modules `@lism.modules.state`	レイアウトを構成する役割を持ちつつ、複数のレイアウトモジュールに対してつけ外しできるような汎用性の高いモジュール群。 `.is\|has--{state}` の形式で定義します。
Layout Modules `@lism.modules.layout`	レイアウトの構成単位となるようなモジュール群。 `.l--{module}` の形式で定義します。
Atomic Modules `@lism.modules.atomic`	レイアウトの構成単位としてそれ以上分解できない最小単位のモジュール群。 `.a--{module}` の形式で定義します。
Dynamic Modules `@lism.modules.dynamic`	JavaScriptと組み合わせて動的な機能を持つ特殊なモジュール群。 `.d--{module}` の形式で定義します。

デザイントークン

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

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

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

CSSのクラス設計

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

Module Class

Lismでは、レイアウトの構成要素を細分化してモジュールとして定義し、いくつかの種類に分類しています。

分類	形式	例
Modules State 状態として付け外しできるようなレイアウト機能を持つもの	`.is\|has--{stateName}`	`.is--container`, `.has--gutter`
Layout Modules レイアウトの構成単位となるようなモジュール	`.l--{name}`	`.l--grid`, `.l--columns`
Atomic Modules レイアウトの最小単位となるモジュール	`.a--{name}`	`.a--divider`, `.a--icon`
Dynamic JSと組み合わせた動きのあるモジュール	`.d--{name}`	`.d--accordion`, `.d--modal`, `.d--tabs`
Custom Modules その他、より具体的な役割を持つコンポーネント群	`.c--{name}`	`.c--button`, `.c--note`

子要素を持つ場合

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

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

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

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

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

Utility Class

Lism CSS では、@lism.modulesレイヤーの前後それぞれにユーティリティクラスを定義するレイヤーが用意されています。

分類	形式	例
Base Utility ベーススタイルの上書きや機能的なプロパティを初期セットするためのユーティリティクラス。 `@lism.base`で定義されます。	`.set-{style}`	`.set-plain`, `.set-transition`
Style Utility 用途が明確な装飾・機能をまとめてセットするユーティリティクラス。 `@lism.utility`で定義されます。	`.u-{style}`	`.u-cbox`, `.u-itemDivider`

Dynamic State

d--{module}と合わせて、Javascriptで動的に付け外しされるようなクラスです。

分類	形式	例
Dynamic State jsによって動的に付け外しされるようなクラス	`.js-{state}`	`.js-active`, `.js-opened`

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:20 -p_sm -p_md -bd" style="--p_sm:var(--s40);--p_md:var(--s50);">
  BOX
</div>

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

その他の推奨規則

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

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

命名規則について

CSS変数の命名規則

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

トークン値など、一つのプロパティに対するバリエーションを示すものは、--{prop}-{token}のようにハイフンを1つ使って表現します。
- 例: --fz--s, --fz--l
- ただし、spaceトークンのみ特殊になっており、。sはプロパティ名ではなくspaceの省略であること、特に頻出なトークンであることから、--s{Num}とします。
  - 例: --s10, --s40
特定の要素に対するプロパティで、:rootで上書き可能な値は--{target}-{prop}の形式で表現します。
- 例: --link-td, --list-px-s, --h-ff, --sh-hsl
Propクラスと対応するCSSプロパティの値を表すものは--{prop}で表現し、クラス名と同じ省略形で表現します。
- 例： --p, --mx
Propクラスのブレイクポイント値は-{prop}_{bp}で表現します。
特定のコンポーネント・モジュールの主要機能を担う変数やそれ自身のCSSプロパティに対する変数は、--{propName}のように単一ブロックで表現します。
- 例: --gutter, --colSize, --sideW
特定のコンポーネント・モジュールの子要素（c--hoge_itemなど）に対するプロパティは--_{item}-{prop}の形式で表現します。
- 例: --_icon-size
スタイルの計算に使われる変数も--_で始めます。
特殊な状態管理に使うような変数は、--{varName}_のように_で終わります。
- 例: --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 → whitespace
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