Lism Tips

Lism CSS の特長

Lism CSS がどんな考えで作られているかを、CSS 設計・トークン・Primitive・Property Class・コンテナクエリの6つの点から紹介します。

Lism CSS は、クラスを集めただけの道具ではありません。サイト全体の CSS をどう組み立てるかまで決めてくれる「設計ごと入ったフレームワーク」です。このページでは、その特長を6つに分けて見ていきます。

1. サイト全体の CSS の設計を引き受ける#

CSS を書くとき、ふつうは「名前をどう付けるか」「どのスタイルを強くするか」を自分で考えます。Lism はそこを最初から決めてくれます。

  • デザイントークン（余白や色などの決まった値のセット）を用意している
  • クラス名と変数名の付け方が決まっている（名前のルール）
  • レイヤー（CSS の強さの順番）が決まっている（CSS のレイヤーと強さの順番）

レイヤーは、弱いほうから次の順に並んでいます。

text
lism-base → lism-block → lism-trait → lism-primitive → lism-custom → lism-utility
  • lism-base の中には、ブラウザのくせをそろえる reset という小さな層が入っています
  • lism-block は、ボタンやカードのような自分で作る部品（b--）を置く層です。わざと弱い位置にあるので、あとから付けた is--・has--・l-- などのクラスが勝ちます
  • lism-trait は is--（役割を名乗る）と has--（機能を足す）のクラスの層です
  • lism-primitive の中は、layout と atomic の2つの層に分かれています
  • lism-custom は、自分で作るクラスや、Lism のクラスを上書きするときに使う層です
補足

設計を丸ごと引き受けるかわりに、ほかの CSS フレームワークと一緒に使うことは考えられていません。

ヒント

はじめに Lism の決まりを覚える手間はかかります。そのかわり、作るたびに「CSS の設計をどうするか」で悩む時間がぐっと減ります。

2. リズムが生まれるトークン#

余白や文字の大きさは、決まった段階の値（トークン）から選びます。段階の幅に工夫があるので、同じトークンを使い回すだけで、見た目に自然なリズム（くり返しの心地よさ）が出ます。

値がそろうので、あとから直すのも楽になり、ページどうしの見た目もそろいます。くわしくは デザイントークン を見てください。

3. レイアウトの部品（Primitive）#

Web サイトでよく出てくる並べ方を小さな部品に分け、どこでも使い回せるようにしています。この考え方は、Every Layout という本の「レイアウトプリミティブ」を手本にしています。

クラス 何をする？
l--flex Flexbox で並べる
l--stack 縦に積む
l--columns 同じ幅の列に分ける
l--center 真ん中に置く
l--switchColumns 置いた場所の幅で、横並びと縦並びが切り替わる

ほかにもたくさんあります。一覧と選び方は Primitive ってなに？ にまとめています。

4. CSS 変数を使った Property Class#

Lism には、Tailwind CSS と同じように、CSS のプロパティ（色・大きさなど、見た目の種類）1つずつに対応したクラスがあります。これを Property Class と呼びます。

ただし、「全部のプロパティ × 全部の画面の幅」のクラスを用意しているわけではありません。たとえば md:p-30 のような、画面の幅つきのクラスはありません。かわりに、-p_md のようなクラスと --p_md という CSS 変数（あとから値を入れられる入れ物）を組み合わせます。

html
<div class="-p:20 -p_sm -p_md -bd" style="--p_sm: var(--s30); --p_md: var(--s40)">BOX</div>

React では次のように書けます。

jsx
<Lism p={[20, 30, 40]} bd>
  BOX
</Lism>
ヒント

このしくみのおかげで、CSS のファイルを小さく保ったまま、よく使うプロパティを画面の幅で簡単に切り替えられます。

書き方は Property Class の書き方 と 画面の幅で切り替える（レスポンシブ） で説明しています。

5. CSS を書くことも前提にしている#

Lism は、HTML にすべてを書き込む Tailwind CSS とも、JavaScript の中にスタイルを閉じこめる CSS-in-JS とも違う考え方をとっています。

  • 大まかなレイアウトや軽い飾り：クラスと CSS 変数で手早く組む
  • 細かい見た目や作り込み：ふつうの CSS でていねいに書く

クラスだけで全部を済ませようとはせず、CSS を書いたほうがよいところは CSS で書く、という分担です。

6. 画面の幅に頼らないレイアウト#

Lism には、画面の幅（メディアクエリ）を使わずに、置かれた箱の幅に合わせて自分で形を変える Primitive があります。これも Every Layout の考え方からきています。

  • l--autoColumns：箱の幅に合わせて、列の数が自動で決まる
  • l--switchColumns：箱の幅で、横並びと縦並びが自動で切り替わる
  • l--withSide：メインの部分に残したい幅をもとに、並び方が自動で切り替わる

切り替えはコンテナクエリが基本#

ブレイクポイント（レイアウトを切り替える幅）を使ったふつうのレスポンシブも使えます。ただし Lism では、画面の幅を見るメディアクエリではなく、親の箱の幅を見るコンテナクエリを標準にしています。

注意

コンテナクエリで値を切り替えるには、外側のどこかの要素を「幅の基準になる箱」にしておく必要があります。Lism では、その要素に is--container を付けるだけです（is--container）。

コンテナの中では position: fixed の動きが変わるなど、知っておくことが少しあります。そのかわり、部品が置かれた場所の幅に合わせて自分で形を変えるので、どこに置いても崩れにくくなります。

関連するページ#

公式ドキュメント

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

ページの一覧