命名規則

このページでは、Lism CSSにおけるクラス名やCSS変数名の命名規則を説明します。

CSS変数の命名規則

変数名の各ブロックはキャメルケースで --{varName} の形式が基本となります。

トークン変数

| 種類 | 形式 | 例 | |------|------|-----| | 基本 | --{prop}--{token} | --fz--l, --bdrs--20, --bxsh--10, --sz--s | | カラー | --{color} | --brand, --text, --text-2,--red | | 余白 | --s{Token} | --s10, --s40 |

トークンのバリエーション表現

| 表記 | 条件 | 例 | |------|------|-----| | s, m, l, xl… | ベース値を中心に大小の段階を示す場合 | --fz--s, --fz--l | | base | :root/body の初期値にセットされるもの | --fz--base, --lh--base | | 10, 20, 30… | 0（none）基準で段階的に増加する場合 | --bdrs--20, --bxsh--30 | | セマンティック名 | 上記に当てはまらない場合は、セマンティックな名前をつける | --ar--og |

例外: opacity トークン

🎵 opacity トークン（--o--mp / --o--p / --o--pp / --o--ppp）は、音楽の強弱記号（piano 系列）に由来するセマンティック命名を採用しています。p（piano / 弱く）の反復回数が多いほど透明度が増す構造で、「文字の反復回数で段階を表す」命名は Lism 内で opacity のみの例外です。

Property Class 用の変数

Property Class（-{prop}:{value}）で使用される変数名に関するルールです。

| 形式 | 説明 | 例 | |------|------|-----| | --{prop} | クラスの{prop}部分と同じ省略名 | --p, --bgc, --bdrs, --m | | --{prop}_{bp} | ブレークポイント値 | --p_sm, --mx_md |

その他の変数

| 形式 | 用途 | 例 | |------|------|-----| | --{target}-{prop} | 要素・クラスに対するプロパティ（:rootで上書き可能） | --link-td, --headings-ff | | --{propName} | クラス自身の主要機能を制御する変数。要素側で値が初期化され、:root からは初期値の定義ができないもの | --sideW, --mainW | | --_{item}-{propName} | コンポーネントクラス（c--）の子要素に対するプロパティ | --_icon-size | | --_{varName} | 状態管理用の内部変数 | --_isHov, --_notHov |

クラスの命名規則

クラス分類に合わせたプレフィックスをつけます。この時、ハイフン2つ（--) で繋ぎます。

Component: c--
Atomic Primitives: a--
Layout Primitives: l--
Trait (役割宣言): is--
Trait (機能付与): has--
Set Class: set--
Utility Class: u--

プレフィックスに続く名称は、camelCaseで命名します。

NG： c--my-component
OK： c--myComponent

Property Classの命名規則については、以下の通りです。

特定の値とセットのクラス: -{prop}:{value}
--{prop}変数を受け取るクラス: -{prop}
ブレークポイント(--{prop}_{bp})を受け取るクラス: -{prop}_{bp}

クラスプレフィックスの責務一覧

各プレフィックスに対応する責務と配置レイヤーは以下の通りです。

| プレフィックス | 責務 | レイヤー | 例 | |---|---|---|---| | set-- | HTML 要素の基礎スタイリング / 変数のセット | lism-base | set--plain, set--hov, set--bxsh, set--bdrsInner | | l-- | レイアウトの構成単位（Layout Primitive） | lism-primitive | l--box, l--flex, l--grid | | a-- | レイアウトの最小単位（Atomic Primitive） | lism-primitive | a--icon, a--divider, a--spacer | | c-- | BEM 構造を持つ UI 部品（Component） | lism-component | c--card, c--button | | is-- | 〜である（役割・存在の宣言） | lism-trait | is--container, is--wrapper, is--layer, is--boxLink | | has-- | 〜を持つ（単一機能 trait の付与） | lism-trait | has--transition, has--gutter, has--snap | | u-- | 装飾的効果（単独 / 子要素装飾を含む） | lism-utility | u--trim, u--cbox, u--divide, u--enclose, u--clipText |

`is--` / `has--` / `set--` / `u--` の使い分け

set-- / is-- / has-- / u-- はどれも「何らかの意味を要素に付与するクラス」ですが、それぞれ役割が異なります。迷ったときは以下の判断軸を参照してください。

| | 目的 | CSS 変数 | |---|---|---| | set-- | HTML 要素の基礎スタイリング / 変数のセット | 必須ではない | | is-- | 〜である（役割・存在の宣言） | 必須ではない | | has-- | 〜を持つ（機能の付与） | 必須（カスタマイズポイントを提供） | | u-- | 装飾的効果（単独 / 子要素装飾を含む） | 必須ではない |

`{prop}` の省略ルール

基本的な方向性として、 Emmet を参考にした省略を行います。

1文字プロパティ

1文字に省略できる主要プロパティを、以下のように定めます。

| 省略記法 | プロパティ | |------|------| | p | padding | | m | margin | | g | gap | | c | color | | f | font | | w | width | | h | height | | d | display | | o | opacity | | v | visibility | | i | inset | | t | top | | b | bottom | | l | left | | r | right | | z | z-index |

上記の中で Emmet と異なるのは opacityです。

プロパティグループ

以下のようなプロパティについての省略ルールを紹介します。

font/font-*, background/background-*, padding/padding-* のように、ショートハンド/ロングハンドのグループ
text-alignとtext-decorationのようなtext-*系などの共通したプレフィックスを持つグループ

基本形式: 「グループ略称」+「サブプロパティ名の省略形」

いくつかの例を挙げます。

| CSS プロパティ | Prop | |-------------|------| | font | f | | font-size | fz | | font-weight | fw | | background | bg | | background-color | bgc | | background-image | bgi | | flex | fx | | flex-shrink | fxsh | | flex-grow | fxg | | grid-template | gt | | grid-template-columns | gtc | | grid-template-rows | gtr |

方向指定系の形式: 「グループ略称」 + `-` +「方向指定」

方向を示すサイドプロパティは、ハイフン（-）付きのサフィックスで方向を指定します。
inline/blockは、x/y とします。
inline-start/inline-endはis/ieではなく、すでに普及しているCSSフレームワークの慣習に沿ってs/eとします。

例:

| 方向 | サフィックス | 例 | |------|-----------|-----| | physical | -t / -b / -l / -r | bd-t, bd-b, bd-l, bd-r | | inline / block | -x / -y | bd-x, bd-y | | inline-start / end | -s / -e | bd-s, bd-e, ps, pe, ms, me, i-s, i-e | | block-start / end | -bs / -be | bd-bs, bd-be, pbs, pbe, mbs, mbe, i-bs, i-be | | x / y | -x / -y | ov-x, ov-y |

方向指定系の例外: `p`, `m` のみ、ハイフンを省略

padding, margin については、pt, px, my のような記法が CSS フレームワークで広く普及しているため、ハイフンを省略します。

| 方向 | 省略形| |-------------|----------| | physical | pt, pb, pl, pr, mt, mb, ml, mr | | inline / block | px, py, mx, my | | inline-start / end | ps, pe, ms, me | | block-start / end | pbs, pbe, mbs, mbe |

グループ略称の衝突禁止

一つのグループで使用された略称を他のグループで再利用してはいけません。

NG例: flexをfxとし、flex-shrinkをfshとしてしまう。（fx グループの一貫性を崩すため）

max- / min- プロパティ

max-, min- プレフィックスはハイフンを保持します。

例:

| CSS プロパティ | Prop | |-------------|------| | max-width | max-w | | min-width | min-w | | max-height | max-h | | min-height | min-h |

その他のプロパティ

その他のプロパティは、以下の基準で省略します。

1単語: そのまま使用 or 省略
ハイフン繋がり、または6文字以上: Emmet形式、または認識しやすい範囲で省略

例:

| CSS プロパティ | Prop | 分類 | |-------------|------|------| | float | float | そのまま | | order | order | そのまま | | position | pos | 省略 | | overflow | ov | 省略 | | inline-size | sz | 省略 | | block-size | bsz | 省略 | | aspect-ratio | ar | 省略 | | writing-mode | wm | 省略 | | white-space | whs | 省略 |

1文字プロパティの短縮名の再利用

グループを持たない1文字プロパティの場合は、その他のハイフン前半部分の略称としてその文字を再利用できます。また、方向プロパティのみをサブプロパティに持つ場合も、方向サフィックスと衝突しない範囲で再利用できます。

以下はその一例です。

| 1文字 Prop | 再利用先 | 展開例 | |-----------|---------|--------| | t(top) | text-*| ta(text-align) | | l(left) | line-*| lh(line-height) | | w(width) | writing-| wm(writing-mode) | | p(padding) | place-*| pi(place-items) |

grid-* の g は例外的で、gridをLismでは扱わないという例外的なルールによって許容されています。

`{value}` の省略ルール

Property Class-{prop}:{value}の{value}部分の省略ルールについて説明します。

基本ルール: CSS の実値をそのまま使う

{value} 部分は基本的に省略はしません。{prop} がすでに省略されているので、その代わり {value} との組み合わせからプロパティを推測できるようにするためです。

.-d:none          → display: none;
.-d:inline-flex   → display: inline-flex;
.-pos:relative    → position: relative;
.-ta:center       → text-align: center;
.-fx:1            → flex: 1;
.-fxd:column      → flex-direction: column;

トークン値を利用する場合

対応するトークンがある場合は、そのトークン値(--{token}--{value} の {value}部分)を利用します。

.-c:text-2        → color: var(--text-2);
.-fz:l            → font-size: var(--fz--l);
.-p:10            → padding: var(--s10);
.-fw:bold         → font-weight: var(--fw--bold);
.-bdrs:20         → border-radius: var(--bdrs--20);
.-bxsh:10         → box-shadow: var(--bxsh--10);

opacity トークンは音楽記号に由来する例外的な命名で、そのままクラス化されます。

.-o:mp            → opacity: var(--o--mp);
.-o:p             → opacity: var(--o--p);
.-o:pp            → opacity: var(--o--pp);
.-o:ppp           → opacity: var(--o--ppp);

値の表記ルール

単位、マイナス、小数点なども、基本的にはそのままクラス化します。

.-w:100%        → width: 100%;
.-h:100%        → height: 100%;
.-z:-1          → z-index: -1;
.-ar:16/9       → aspect-ratio: 16/9;

小数点付きのProperty Classはコアにはないが、例えばopacity:0.75のような固定値をクラス化したい場合は次のようなCSSを追加して利用します。

.-o\:0\.75{opacity: 0.75;}

/* → <div class="-o:0.75"> のようにして使う */

長いキーワード値、かつ意味が通りやすいものは省略可

例外的に、6文字以上の値で、かつ省略してもすぐに意味がわかるものであれば省略可とします。

| 実際の値 | 省略名 |クラスの例 |--------|------------|-----| | uppercase | upper | -tt:upper | | lowercase | lower | -tt:lower | | fit-content | fit | -w:fit, -h:fit | | space-between | between | -ac:between, -jc:between | | currentColor | current | -bdc:current |