Lism Tips

はじめに・ステップ 5 / 7

クラスの種類と見分け方

Lism のクラスを頭の文字（l--・a--・is--・has--・set--・u--・b--・c--・-）で見分ける表と、それぞれの役割・例をまとめます。

Lism のクラスは、名前の頭の文字を見れば、どんな役割のクラスかが分かるようになっています。このページでは、その見分け方を表にして、種類ごとに例を挙げます。

頭の文字で見分ける#

頭の文字 呼び名 役割 例
l-- Layout Primitive 並べ方の土台 l--stack・l--grid
a-- Atomic Primitive 並べ方のいちばん小さい部品 a--divider・a--icon
is-- Trait（役割） 「〜である」と役割を名のる is--container・is--wrapper
has-- Trait（機能） 「〜を持つ」と働きを1つ足す has--gutter・has--transition
set-- Set Class HTML 要素の下地を整える・変数をまとめて入れる set--plain・set--bxsh
u-- Utility Class 飾りや決まった効果を付ける u--trim・u--cbox
b-- Block サイトで何度も使う部品（自分で作る） b--btn・b--badge
c-- Custom 自由に作る自分用のクラス c--pricing・c--siteHeader
- Property Class CSS のプロパティを1つだけ指定する -p:20・-fz:l

頭の文字と名前のあいだは、- を2つ（--）つなげます。名前の部分は、2つめの単語の頭を大文字にしてつなげます（camelCase）。たとえば c--my-component ではなく c--myComponent と書きます。

Property Class だけは形がちがい、- 1つで始まります。

l-- と a--（Primitive）#

ページの並べ方を組み立てるための、小さな積み木です。まとめて Primitive（プリミティブ）と呼びます。

  • l--（Layout Primitive）：縦に並べる・横に並べる・列に分ける、など並べ方の土台
  • a--（Atomic Primitive）：区切り線・すきま・アイコンなど、いちばん小さい部品

表示例

上の箱
下の箱
html
<div class="l--stack -g:20">
  <div class="-p:20 -bgc:base-2">上の箱</div>
  <hr class="a--divider">
  <div class="-p:20 -bgc:base-2">下の箱</div>
</div>
注意

1つの要素に l-- を2つ付けたり、a-- を2つ付けたりしてはいけません。l-- と a-- を同じ要素に付けることも、ふつうはしません。

くわしくは Primitive ってなに？（選び方） を見てください。

is-- と has--（Trait Class）#

要素に役割や働きを足すクラスです。まとめて Trait Class（トレイト。性質という意味）と呼びます。

is-- has--
意味 〜である（役割を名のる） 〜を持つ（働きを足す）
CSS 変数 なくてもよい かならずある（値を変えられる）

たとえば is--container は「この箱が幅の基準である」、has--gutter は「左右の余白を持つ」という意味です。

表示例

has--gutter で左右に余白が付いています。

html
<div class="has--gutter -py:20 -bd">
  <p>has--gutter で左右に余白が付いています。</p>
</div>

くわしくは Trait Class ってなに？ を見てください。

set--（Set Class）#

HTML の要素に最初から付いている見た目を整えたり、関係する CSS 変数をまとめて入れたりするクラスです。たとえば set--plain は、ボタンなどの要素の見た目をまっさらにします。くわしくは Set Class（set--*） を見てください。

u--（Utility Class）#

役目のはっきりした飾りや効果を付けるクラスです。たとえば u--trim は、文章の上下に出る行の余分なすきまを切り取ります。くわしくは Utility Class（u--*） を見てください。

b-- と c--（自分で作るクラス）#

この2つは、Lism 本体には入っていません。自分で CSS を書いて作るクラスの名前の付け方です。

  • b--（Block）：ボタン・バッジ・カードのように、サイトのあちこちで何度も使う部品。クラスを1つ付ければ基本の見た目が決まるようにしたいもの
  • c--（Custom）：それ以外の、自分用のクラス。ヘッダーやサイドバーなどの場所の名前にも使えます。CSS を書かずに「これは何の部品か」を示す名札としてだけ使ってもかまいません

b-- と c-- だけは、部品の中の子要素や色ちがいを表す名前を持てます。

種類 形 例
本体 b--{名前} b--btn・b--card
ちがう見た目（Modifier） b--{名前}--{種類} b--btn--outline
中の子要素（Element） b--{名前}_{子の名前} b--card_header

色ちがいは class="b--btn b--btn--outline" のように、本体と一緒に付けます。

-{prop}:{value}（Property Class）#

CSS のプロパティ1つと、その値を1つのクラスにしたものです。いちばんたくさん使います。

形 意味 例
-{prop}:{value} 決まった値を入れる -fz:l・-d:none
-{prop} CSS 変数 --{prop} の値を使う -p・-fz
-{prop}_{bp} 画面の幅ごとの値 --{prop}_{bp} を使う -p_sm・-p_md

表示例

-p:20 -fz:l -ta:center

html
<p class="-p:20 -bd -fz:l -ta:center">-p:20 -fz:l -ta:center</p>

{prop} は CSS のプロパティの略です（p は padding、fz は font-size）。略し方は 名前のルール（省略のしかた）、使い方は Property Class の書き方 で説明しています。

強さの順番#

同じ要素に、ちがう種類のクラスが同じプロパティを指定したときは、強いほうが勝ちます。Lism では、種類ごとに強さの順番が決まっています（下ほど強い）。

  1. set--（いちばん弱い）
  2. b--
  3. is--・has--
  4. l--・a--
  5. c--
  6. u--
  7. Property Class（-p:20 など。いちばん強い）

Property Class がいちばん強いので、ほかのクラスの見た目を、あとから1か所だけ変えたいときに使えます。しくみは CSS のレイヤーと強さの順番 で説明しています。

次に読むページ#

公式ドキュメント

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

ページの一覧