Lism Props（コンポーネントの指定）
Lism Props は、<Lism> などのコンポーネントに渡す Lism 専用の値です。as・className・layout・Trait・CSS の Props と、クラスになる決まりをまとめます。
Lism Props は、<Lism> やそれをもとにしたコンポーネント（<Box>・<Stack> など）に渡せる、Lism 専用の Props（コンポーネントに渡す値）です。p="20" と書くと -p:20 のクラスが付く、というように、Props がクラスや CSS 変数に変わります。コンポーネントの使い方そのものは Lism コンポーネント（React・Astro） にあります。
一覧#
| Props | 何になるか |
|---|---|
as |
出すタグ・使うコンポーネント |
className |
自分で書くクラス |
set |
set--* のクラス |
util |
u--* のクラス |
layout |
l--* のクラス |
atomic |
a--* のクラス |
isWrapper など |
is--*・has--* のクラス（Trait Props） |
p・fz など |
-p:20 のような Property Class（CSS Props） |
exProps |
Lism Props として扱わない値 |
as（出すタグ）#
as で、出す HTML のタグを決めます。何も書かなければ div です。
<Lism as="p">Lorem ipsum texts...</Lism>
// → <p>Lorem ipsum texts...</p>
as には、ほかのライブラリのコンポーネントも渡せます。先に Lism Props から className と style を作り、それを as のコンポーネントに渡します。Lism でないコンポーネントにも Lism Props を使いたいときに便利です。
import Image from 'next/image';
<Media as={Image} src="..." p="20" bd />
className（自分のクラス）#
好きなクラスを付ける、ふつうの Props です。b--*（Block Class）や c--*（Custom Class）、ほかの CSS のクラスはここに書きます。
<Lism p="10" className="c--myComponent">Lorem ipsum texts...</Lism>
// → <div class="c--myComponent -p:10">Lorem ipsum texts...</div>
前は lismClass・variant という専用の Props がありましたが、今は className 1つにまとまりました。BEM の形のクラスは、UI コンポーネントの側で @lism-css/ui の buildModifierClass を使って作ります。
set・util#
set は Set Class（set--*）、util は Utility Class（u--*） を付けます。
<Lism set="bxsh" util="cbox">...</Lism>
// → <div class="set--bxsh u--cbox">...</div>
空白で区切ると、いくつも付けられます。
<Lism set="hov" hasTransition util="cbox trim">...</Lism>
値の頭に - を付けると、そのクラスを外せます。コンポーネントに最初から付いているクラスを外したいときに使います。
{/* 最初から付いている set--plain を外す */}
<MyButton set="-plain">...</MyButton>
{/* u--trim を外して u--cbox を足す */}
<MyCallout util="-trim cbox">...</MyCallout>
layout・atomic#
layout はレイアウトの l--*、atomic は小さな部品の a--* のクラスを付けます。
<Lism layout="flow">Lorem ipsum texts...</Lism>
<Lism atomic="divider" />
// → <div class="l--flow">Lorem ipsum texts...</div>
// → <div class="a--divider"></div>
layout・atomic の値によって、受け取れる Props が増えることがあります。たとえば layout="withSide" なら sideW・mainW、atomic="spacer" なら w・h に余白のトークンを書けます。
Trait Props#
is--*・has--*（Trait Class）を付ける Props です。isLayer のように名前だけ書けば、そのクラスが付きます。
| Props | 出るクラス | 何をするか |
|---|---|---|
isWrapper |
is--wrapper |
中身の幅をしぼる。's'・'m'・'l'・'xl' を渡すと -contentSize:{値} も付く |
isLayer |
is--layer |
上に重ねる層にする（inset:0 の絶対配置） |
isBoxLink |
is--boxLink |
箱ごとリンクにする |
isCoverLink |
is--coverLink |
親の箱いっぱいにクリックできる範囲を広げるリンク |
isContainer |
is--container |
コンテナクエリの基準にする |
isSide |
is--side |
横に置く要素にする |
isSkipFlow |
is--skipFlow |
Flow の余白をとばす |
hasTransition |
has--transition |
transition を CSS 変数で付ける。文字を渡すと --transitionProps で変化させるプロパティを決められる |
hasGutter |
has--gutter |
左右に同じ余白（--gutter・--gutter--base）をとる |
hasSnap |
has--snap |
scroll-snap-* を CSS 変数で付ける |
hasMask |
has--mask |
mask を CSS 変数で付ける |
CSS Props#
-{prop}:{value} の形のクラス（Property Class）を付ける Props です。名前は、クラスと同じ短い名前を使います（font-size なら fz、padding なら p）。
渡す値によって、出てくる形が変わります。
| 渡す値 | 出てくるもの | 例 |
|---|---|---|
| トークン・用意された値 | -{prop}:{value} のクラス |
fz='l' → -fz:l |
true |
-{prop} のクラスだけ |
bd → -bd |
: で始まる値 |
むりやりクラスにする | p=':hoge' → -p:hoge |
| ほかの値（BP 対応） | -{prop} と --{prop} 変数 |
fz='20px' → -fz と --fz:20px |
| ほかの値（BP 非対応） | style 属性にそのまま |
o='0.7' → opacity:0.7 |
| ほかの値（変数だけのもの） | --{prop} 変数だけ |
bdw='2px' → --bdw:2px |
- BP 対応：ブレイクポイント（画面の幅）で値を切りかえられるプロパティです。対応の有無は、Property Class の書き方 の表の BP の欄で確かめられます
- 変数だけのもの：
bds・bdc・bdw・keycolorのように、クラスを持たず CSS 変数だけで出るものです - トークンはあるのにクラスが無い値は、CSS 変数で出ます（
c='red'→class="-c"とstyle="--c:var(--red)"）
<Lism fz="l" p="20">...</Lism>
// → <div class="-fz:l -p:20">...</div>
<Lism c="red">...</Lism>
// → <div class="-c" style="--c:var(--red)">...</div>
<Lism p bdrs>contents</Lism>
// → <div class="-p -bdrs">contents</div>
<Lism bd bdc="#000" bdw="2px">...</Lism>
// → <div class="-bd" style="--bdc:#000;--bdw:2px">...</div>
<Lism fz="20px">contents</Lism>
// → <div class="-fz" style="--fz:20px">contents</div>
<Lism o="0.75">contents</Lism>
// → <div style="opacity:0.75">contents</div>
p のように true を渡してクラスだけ付ける書き方は、変数の中身を CSS で決めたいときや、親と同じ変数をそのまま使いたいときに役立ちます。
c="red" の出力を HTML で書くと、こう見えます。
表示例
<div class="-p:20 -bd -c -fz:l -fw:700" style="--c: var(--red)">赤い文字</div>
: でクラスにする#
用意されたクラスが無い値でも、頭に : を付けると、後ろの文字がそのままクラス名になります。
<Lism p=":hoge">...</Lism>
// → <div class="-p:hoge">...</div>
そのクラスの CSS は、自分で書き足します。
.-p\:hoge {
/* ... your styles ... */
}
className='-p:hoge' と書いてもかまいません。ただ、: を使って CSS Props として渡すと、クラスの並ぶ順番がそろいます。
: だけを渡すと、true を渡したときと同じく、-{prop} のクラスだけが付きます。入力欄などから true を渡せないときに便利です。
<Lism bd=":">...</Lism>
// → <div class="-bd">...</div>
色を透かす・まぜる#
c・bgc・bdc など色の Props では、値を : で区切ると、透明にしたり、2つの色をまぜたりできます。値は color-mix()（色をまぜる CSS の関数）になり、CSS 変数で出ます。
{color}:{alpha}%：色を{alpha}%の濃さにする（残りは透明）{color1}:{color2}:{ratio}%：{color1}に{color2}を{ratio}%まぜる
<Lism bgc="black:50%">...</Lism>
// → <div class="-bgc" style="--bgc:color-mix(in srgb, var(--black) 50%, transparent)">...</div>
<Lism c="text:blue:5%">...</Lism>
// → <div class="-c" style="--c:color-mix(in srgb, var(--text), var(--blue) 5%)">...</div>
- トークンに無い値は、そのまま
color-mix()に入ります（bgc="currentColor:10%"→color-mix(in srgb, currentColor 10%, transparent)） - この書き方は Lism Props だけのものです。HTML では、
style属性にcolor-mix()を直接書きます
表示例
<div class="-p:20 -bgc -c:base -fz:l -fw:700" style="--bgc: color-mix(in srgb, var(--black) 50%, transparent)">黒を 50% にした背景</div>
レスポンシブ（画面の幅で切りかえる）#
BP 対応の Props は、配列かオブジェクトで、ブレイクポイント（sm・md・lg）ごとの値を書けます。配列は、左から「ふつう・sm・md」の順です。
<Lism p={['20', '30', '5rem']}>...</Lism>
// → <div class="-p:20 -p_sm -p_md" style="--p_sm:var(--s30);--p_md:5rem">...</div>
<Lism p={[null, null, '40']}>...</Lism>
// → <div class="-p_md" style="--p_md:var(--s40)">...</div>
値が本当に切りかわるのは、そのプロパティがレスポンシブに対応しているときだけです。Property Class の書き方 の表で、BP の欄を見てください。対応していないものは、SCSS で設定する で対応させられます。
くわしくは 画面の幅で切り替える（レスポンシブ） にあります。
exProps#
ほかのライブラリの部品に、値を確実に届けたいときに使います。
as でほかの部品を使うと、その部品の Props と Lism Props が同じ名前になることがあります。そのままだと、Lism が先に受け取ってしまうかもしれません。exProps に入れた値は、Lism が読まずに、そのまま as の部品へ渡します。
<Icon as={Hoge} exProps={{ size: '1em' }} p="10" fz="l">
...
</Icon>
この例で、p と fz を使うのは Lism の Icon です。size は Hoge だけに届きます。
今の Lism は size を受け取らないので、この例は exProps が無くても動きます。それでも、ほかの部品用の値だと書いておけば、Lism が新しい Props を足しても困りません。
クラスが並ぶ順番#
<Lism> が出す class は、次の順番に並びます。
[className（b-- / c-- 含む）] [a--] [l--] [set--] [is-- / has--] [u--] [-]
| 順 | Props | 例 |
|---|---|---|
| 1 | className・class |
b--btn・c--box |
| 2 | atomic |
a--icon・a--divider |
| 3 | layout |
l--flex・l--columns |
| 4 | set |
set--hov |
| 5 | Trait（isXxxx・hasXxxx） |
is--wrapper・has--transition |
| 6 | util |
u--cbox・u--trim |
| 7 | CSS Props | -p:20・-hov:-c |
layout="flow"の-flow:{size}は、l--flowのすぐ後ろに並びますb--*・c--*はclassNameのどこに書いてもかまいませんが、読みやすいように先頭に書くのがおすすめです- この順番は読みやすくするためのものです。どのスタイルが勝つかには関係しません
関連するページ#
公式ドキュメント
2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。