Lism CSS
Docs
検索

命名規則

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

CSS変数の命名規則

変数名の各ブロックはcamelCaseで --{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, --hl--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} 特定のセレクタを起点に、子要素へ設定するプロパティ --link-td, --headings-ff, --icon-size
--{propName} クラス自身の主要機能を制御する変数。要素側で値が初期化され、:root からは初期値の定義ができないもの --sideW, --mainW
--_{varName} 上書きを想定しない内部処理用の変数・状態判定用の変数 --_panelH、--_flipX、--_isHov

--{target}-{prop}は、:rootを起点にする場合も、.b--*や.c--*を起点にする場合も同じ形式です。:root以外を起点にする変数は、次のルールで外部からの影響を閉じます。

  • 起点のセレクタで必ず初期値をセットする（例: .b--list { --icon-size: 1em; }）。祖先や他のコンポーネントから同名の値を継承しないため。
  • 値を変えるときは:rootではなく、起点の要素にインラインstyleやpropsで指定する。

クラスの命名規則

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

  • Block: b--
  • Custom: 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

なお、BEM構造（Block / Modifier / Element）を持てるのは b-- と c-- のみです。記法の詳細は CSS設計 を参照してください。

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
b-- ベーススタイルをCSS側で管理する基礎部品（Block） lism-block b--btn, b--badge
c-- Lism 本体に含まれない、ユーザーが自由に定義するカスタムクラス（Custom） lism-custom c--pricing, c--siteHeader
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--trimAll, u--cbox, u--srOnly, 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グループの一貫性を崩すため。正しくはfxsh）
  • flex系のグループ略称にfを使う（fはfontグループの略称のため、flex-wrapがfont-weightのfwと、flex-shrinkがfont-styleのfsと衝突する。これを避けるためflex系はfxを使い、fxw・fxshとしている）

max- / min- プロパティ

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

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

その他のプロパティ

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

  1. 1単語: そのまま使用 or 省略
  2. ハイフン繋がり、または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文字プロパティの場合は、ハイフンで繋がった別のプロパティの前半部分の略称として（topのtをtext-*のtに使うなど）、その文字を再利用できます。 また、方向プロパティのみをサブプロパティに持つ場合も、方向サフィックスと衝突しない範囲で再利用できます。

以下はその一例です。

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 プロパティ自体の Property Class を Lism では用意していないため、gap の g と衝突せず許容しています。

{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;

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

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

.-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文字以上の値で、かつ省略してもすぐに意味がわかるものであれば省略可とします。

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

© 2026 Lism CSS.