Trait Class ってなに？

Trait Class は、要素に役割を名乗らせる is-- と、機能を足す has-- の2種類のクラスです。違いと一覧をまとめます。

Trait Class（トレイト・クラス）は、要素に「この箱は何者か」を名乗らせたり、「この箱にこの働きを足す」と指定したりするクラスの仲間です。名前は is-- か has-- で始まります。

is-- と has-- の違い#

頭の文字	意味	読み方のイメージ
`is--`	要素の役割を決める	「この箱は〜です」
`has--`	要素に機能を1つ足す	「この箱は〜を持っています」

たとえば is--container は「この箱は幅の基準です」と名乗らせます。has--gutter は「この箱は左右の余白を持っています」と働きを足します。

Trait Class の CSS は、lism-trait というレイヤー（CSS の強さの段）に入っています。レイヤーについては CSS のレイヤーと強さの順番で説明しています。

クラス	どんな役割か
`is--container`	コンテナクエリ（箱の幅で見た目を変えるしくみ）の基準になる
`is--wrapper`	中身の幅をそろえる外側の箱になる
`is--layer`	親の箱の上に、ぴったり重なる層になる
`is--boxLink`	箱全体をクリックできるリンクにする
`is--coverLink`	親の箱いっぱいにクリックできる範囲を広げるリンク（`is--boxLink` のページで説明）
`is--side`	`l--withSide` の中で、横に置く側の要素を示す
`is--skipFlow`	`l--flow` の中で、すぐ次の要素とのすきまを 0 にする

どれも、専用の CSS 変数（--duration など）で細かく調整できます。詳しくはそれぞれのページで説明します。

has--gutter を付けると、箱の左右に余白が付きます。

表示例

左右に余白が付いた箱の中身

html

<div class="has--gutter -py:20 -bgc:base-2">
  <p class="-bd">左右に余白が付いた箱の中身</p>
</div>

コンポーネントでは、isContainer・hasGutter・hasTransition のような名前の指定で同じクラスが付きます。

jsx

<Lism hasGutter>
  <p>コンテンツ</p>
</Lism>

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