Lism Tips

名前のルール（省略のしかた）

Lism CSS のクラス名と CSS 変数の名前の付け方、プロパティ名と値の省略のしかたを、表でまとめて説明します。

Lism のクラス名は -fz:l や -bgc:base-2 のように短く省略されています。省略には決まった規則があるので、規則を知っていれば、初めて見るクラスでも何をするのか見当がつきます。このページでは、その規則をまとめます。

CSS 変数の名前#

CSS 変数（あとから値を入れられる入れ物。-- で始まる）の名前は、--{varName} の形が基本です。語のつなぎは camelCase（sideW のように、2語目から頭を大文字にする書き方）にします。

トークンの変数#

トークン（決まった段階の値）の変数は、種類ごとに形が決まっています。

種類 形 例
基本 --{prop}--{token} --fz--l・--bdrs--20・--bxsh--10・--sz--s
色 --{color} --brand・--text・--text-2・--red
余白 --s{Token} --s10・--s40

トークンの段階の表し方#

{token} の部分は、次の4つのどれかで表します。

書き方 どんなとき？ 例
s・m・l・xl… 真ん中の値から、大きい・小さいの段階を表すとき --fz--s・--fz--l
base :root や body に最初から入る値 --fz--base・--hl--base
10・20・30… 0（なし）から順に大きくなるとき --bdrs--20・--bxsh--30
意味を表す名前 上のどれにも当てはまらないとき --ar--og
補足

opacity（不透明さ）のトークン --o--mp・--o--p・--o--pp・--o--ppp だけは例外です。音楽の強弱記号の p（piano、弱く）からきていて、p が多いほど薄くなります。文字のくり返しの数で段階を表すのは、Lism ではこれだけです。

Property Class が使う変数#

形 何に使う？ 例
--{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 Primitive：a--
  • Layout Primitive：l--
  • Trait（役割を名乗る）：is--
  • Trait（機能を足す）：has--
  • Set Class：set--
  • Utility Class：u--

-- のあとの名前は camelCase で書きます。

  • だめ：c--my-component
  • よい：c--myComponent

BEM（Block・Modifier・Element に分けて名前を付けるやり方）の形を持てるのは、b-- と c-- だけです。書き方は CSS のレイヤーと強さの順番 で説明しています。

Property Class の名前は、次の3つの形です。

  • 決まった値を当てるクラス：-{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-- 〜を持つ（機能を1つ足す） 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-- の分け方#

4つとも「要素に何かの意味を付けるクラス」ですが、目的が違います。どれにするか迷ったら、次の表で決めます。

目的 CSS 変数
set-- HTML の要素の基本の見た目・変数のセット なくてもよい
is-- 〜である（役割や存在を名乗る） なくてもよい
has-- 〜を持つ（機能を足す） 必ずある（値を変えて調整できる）
u-- 飾りの効果（その要素だけ、または中の要素も） なくてもよい

{prop} の省略のしかた#

Property Class の {prop}（プロパティの名前）は、Emmet（HTML や CSS を短く打てる入力補助の道具）の省略を手本にしています。

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 と違うのは o（opacity）だけです。

仲間のプロパティ（グループ）#

font と font-size、background と background-color のように、同じ言葉で始まるプロパティは「グループ」として扱います。text-align と text-decoration のような text- の仲間も同じです。

基本の形：グループの略 ＋ うしろの部分の略#

CSS のプロパティ 省略
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 のような書き方が広く使われているので、- をはさみません。

向き 省略
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

グループの略はそろえる・かぶらせない#

仲間どうしは、いつも同じ略を頭に付けます。そして、1つのグループの略を、ほかのグループに貸してはいけません。

  • だめな例：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 のプロパティ 省略
max-width max-w
min-width min-w
max-height max-h
min-height min-h

そのほかのプロパティ#

  1. 1語のもの：そのまま使うか、省略する
  2. ハイフンでつながるもの・6文字以上のもの：Emmet の形か、見て分かる範囲で省略する
CSS のプロパティ 省略 どちら？
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文字の略 使い回す先 例
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 は例外です。Lism には grid プロパティそのもののクラスが無いので、gap の g とぶつからず、使ってよいことにしています。

{value} の省略のしかた#

-{prop}:{value} の {value}（値）の部分の決まりです。

基本は CSS の値をそのまま書く#

値は、基本的に省略しません。プロパティの名前がもう省略されているので、値はそのまま残して、組み合わせから何のプロパティか分かるようにしています。

text
.-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} の部分）を値にします。

text
.-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 のトークンは、音楽記号からきた名前がそのままクラスになります。

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

単位・マイナス・小数点#

単位（% など）やマイナスも、そのままクラス名にします。

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

小数点が付いた Property Class は、Lism 本体には入っていません。opacity: 0.75 のような値をクラスにしたいときは、自分で CSS を足します。クラス名の : と . の前には \ を付けます。

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年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧