Lism CSSとは？v0.29の使い方・クラス体系とTailwindとの違い

Lism CSSは、WordPressテーマSWELLの開発者である了（GitHub: ddryo）が開発している、Webサイトのレイアウトを組むためのCSS設計フレームワークです。ライセンスはMITで、CSSファイルを1本読み込めばビルドなしで動きます。2025年6月11日にnpmで0.1.0が公開され、2026年9月13日の時点で最新版は0.29.1です。

この記事では、v0.29.1のリポジトリとnpm配布物を一次情報として、クラス接頭辞と@layerの構造、導入手順、主要なレイアウトプリミティブ、Tailwind CSSとの違いを整理します。あわせて、配布CSSをChromeで実際に描画して確かめたレスポンシブ指定の落とし穴と、v1.0前ならではの破壊的変更の頻度から見た採用判断も扱います。

まとめ：Lism CSSの要点と採用判断

• 何者か：Every Layoutのレイアウトプリミティブと、Tailwind CSSの単一プロパティ単位のクラスを参考にした日本発のCSSフレームワーク。すべてをクラスで書き切る方式ではなく、細部はネイティブCSSで書く前提です。
• 導入：CDNのmain.cssを読むだけで使えます。React・Astro向けのコンポーネントは同じlism-cssパッケージに入っています。
• クラス体系：l--（レイアウト）、is--／has--（Trait）、-p:20形式のProperty Classなど、接頭辞で役割が分かれます。優先順位は7つの@layerの順序で整理され、Property Classはレイヤーの外に置かれています。
• レスポンシブの落とし穴：既定はコンテナクエリです。祖先に幅を問い合わせられるクエリコンテナが無いと、-p_mdなどのブレークポイント用クラスは画面幅に関係なく効きません。
• 採用判断：2026年8月16日から9月13日までの4週間で、破壊的変更を含むリリースが4回ありました。本番では版を固定し、更新時にchangelogを読む運用が前提です。

Lism CSSの成り立ちと設計の考え方

公式ドキュメントは、Every Layoutからレイアウトプリミティブとハーモニックモジュラースケーリングを、Tailwind CSSからCSSプロパティ単位のクラスという発想を取り入れたと説明しています。コンポーネントの使い心地はChakra UIとMUIを参考にしたと明記されています。

Tailwind CSSとの一番の違いは、CSSを書くことを前提にしている点です。公式の特徴ページでは、主要なレイアウトや軽い装飾はクラスとCSS変数で組み、細部の作り込みはネイティブCSSで整えるという役割分担を示しています。HTMLのclass属性にすべてのスタイルを並べる書き方にはなりません。

名前の「Lism」の由来は、公式サイトにもリポジトリにも書かれていません。公式サイトの特徴説明で「リズム」という語が使われるのは、フィボナッチ数列に基づく余白トークン（--s10〜--s70）で縦のリズムを揃えるというタイポグラフィ設計の文脈です。語源として断定できる記述ではない点に注意してください。

開発の動機について、作者は2026年4月7日のZenn記事「こんなAI時代に、新しいCSS設計フレームワークを作る理由」で、AIがCSSを書くと設計に秩序が無いまま肥大化しやすく、人でもAIでも守れる設計理論が要ると述べています。v0.29.1では、Claude Code向けのスキル、MCPサーバー、llms.txtが公式に用意されています。

クラス接頭辞と@layerの構造

Lism CSSのクラスは、接頭辞を見れば役割が分かるように設計されています。v0.29.1の公式READMEに載っている分類は次のとおりです。

b--とc--の区別はv0.26.0（2026年8月16日）で導入されたもので、それ以前のp--／z--の規約は廃止されました。独自に作るクラスは、ベーススタイルをCSS側で管理する共通部品ならb--、それ以外はc--とします。命名はBlockをキャメルケース、Elementを_1つ、Modifierを--2つで区切る規則です。

異なるレイヤー間では、セレクタの詳細度よりレイヤー順が先に評価されます。同じレイヤー内では詳細度や記述順も作用し、Property Classはレイヤー外に定義されています。npmで配布されているv0.29.1のmain.cssは、先頭で次の順にレイヤーを宣言しています。同じ出所の通常宣言では後ろのレイヤーが優先され、!important付きの宣言同士では順序が逆になります。

@layer lism-base, lism-block, lism-trait, lism-primitive, lism-component, lism-custom, lism-utility;

READMEの説明は6層ですが、配布CSSには旧来のlism-componentを含む7層が宣言されています。v0.26.0のchangelogによれば、lism-componentは互換性のために残されたもので、新しく書く上書きCSSはlism-blockかlism-customに置きます。自作のCSSを@layer lism-customの外に書くと、通常宣言同士ではレイヤーに属する宣言より優先されるため、公式ガイドは独自CSSを必ずlism-custom内に置くよう求めています。

導入手順：CDN・npm・React/Astro

CDN・npmによるCSSの導入

ビルド環境が無い静的サイトでは、CDNのCSSを読み込むだけで使えます。v1.0前は変更が多いため、URLには版番号を入れて固定します。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/main.css" rel="stylesheet" />

npmでv0.29.1を固定して入れる場合はnpm i --save-exact [email protected]のあと、エントリーポイントでimport 'lism-css/main.css';とします。配布物にはmain.cssのほか、ブレークポイント対応をほぼ全プロパティに広げたfull.cssと、@layerを使わないmain_no_layer.cssが含まれます。

React・Astroのコンポーネント

コンポーネントはlism-css/reactとlism-css/astroから読み込みます。propsがクラスとCSS変数に変換される仕組みで、実行時にスタイルを生成しません。Reactのpeer dependenciesは^18 || ^19です。

import { Stack, Flex, Box, Text } from 'lism-css/react';

export function Cards() {
  return (
    <Stack g="20">
      <Flex g="20" ai="center">
        <Box p="20" bgc="base-2" bdrs="20"><Text fz="l">Card A</Text></Box>
        <Box p="20" bgc="base-2" bdrs="20"><Text fz="l">Card B</Text></Box>
      </Flex>
    </Stack>
  );
}

同じ内容をHTMLだけで書くと、<div class="l--stack -g:20">のようにクラスを並べる形になります。Astroでの使い方はAstroフレームワークとは？特徴と使い方・Next.jsとの使い分けを解説【2026年版】もあわせて参照してください。

lism.config.jsとプラグインが必要になる場面

トークンやブレークポイントを変えたいときは、プロジェクトのルートにlism.config.js（.ts／.mjsも可）を置き、@lism-css/pluginを導入します。Vite・AstroではlismCss()、Next.js 16以降ではwithLism()を設定に組み込むと、設定を反映したCSSに差し替わります。Vite・AstroではlismCss({ purge: true })で未使用クラスを削除できます。Next.js向け統合は、このpurge機能に対応していません。

フレームワークへのプラグイン登録をせず、@lism-css/pluginをインストールしてnpx lism-css buildでCSSを生成する方法もありますが、運営者向け文書によれば出力先はnode_modules/lism-css/dist/cssで、同梱CSSを直接上書きします。node_modulesを入れ直すと生成物は消えるため、インストールのたびに実行し直す運用が必要です。CIでnpm ciを走らせる構成では、この手順を忘れるとトークンの変更が本番に反映されません。

新規プロジェクトを雛形から始めるなら、npm create lism@latest（lism-cli createと同じ動作）でテンプレートを選べます。

主要なレイアウトプリミティブの使い分け

Layout Primitiveは、よく使うレイアウトのパターンをクラス1つにまとめたものです。v0.29.1で使えるもののうち、選択に迷いやすいものを並べます。

カラム系が4種類あるのは、切り替えの基準が違うためです。l--columnsは固定列数でも使えます。既定のブレークポイント指定で列数を切り替える場合は、後述のis--containerなどで祖先にクエリコンテナを設定します。一方、l--autoColumnsは--cols: 16emのような最小幅で、l--withSideはメイン側の最小幅--mainW（既定はmax(20rem,50%)）で自動的に折り返すため、ブレークポイントに依存しません。

なお、プリミティブ名はv0.16でl--sideMainからl--withSide、l--fluidColsからl--autoColumnsへ改名されています。2025年に書かれた解説記事のクラス名は、現行版ではそのまま動かないことがあります。

コンテナクエリ既定のレスポンシブと落とし穴

ブレークポイントはsmが480px、mdが800px、lgが1120pxで、それぞれ「その幅以上で効く」モバイルファーストの閾値です。Tailwind CSSの既定（sm=640px、md=768px、lg=1024px）とは値が違うので、併用や移行の際は注意してください。

書き方は、-p_smのようなブレークポイント用クラスと、切り替え先の値を持つCSS変数--p_smの組み合わせです。Reactではp={['20', '30', '40']}のように配列で書くと、同じクラスと変数が出力されます。

<div class="is--container">
  <div class="-p:20 -p_sm -p_md" style="--p_sm:var(--s30);--p_md:var(--s40)">...</div>
</div>

ここで見落としやすいのがis--containerです。Lism CSSの既定では、ブレークポイント用クラスが@mediaではなく@containerの中で発火します。v0.29.1のmain.cssでcontainer-typeを宣言しているのは.is--container{container-type:inline-size}だけでした。独自CSSでコンテナを設定していない場合は、祖先にis--containerを付ける必要があります。独自のcontainer-type:inline-size指定などでも、幅を判定するコンテナを設定できます。

npmから取得したmain.cssを使い、上と同じ指定の要素を幅の違う3つの親に置いて、Chrome 152（ヘッドレス）でpadding-topの計算値を取得しました。

親の幅が900pxあっても、is--containerが無い3行目はmdの値に切り替わりませんでした。エラーも警告も出ないため、レイアウトが変わらない原因に気づきにくい挙動です。ページ全体をレスポンシブにしたいなら、body直下のラッパーなど上位の要素にis--containerを付けておくのが確実です。コンテナクエリそのものの仕組みはCSS Container Queriesで実現するコンポーネント単位のレスポンシブ設計で解説しています。

同じ試験では、--sideW:200pxを指定したl--withSideが、親の幅900pxでは横並び、400pxでは縦並びになることも確認しました。こちらはflexの折り返しで切り替わるので、is--containerは不要です。

画面幅基準に戻したい場合は、SCSSの設定変数$is_container_queryを0にするとメディアクエリで出力されます。

Tailwind CSSとの違い

両者はプロパティ単位のクラスを持つ点では似ていますが、前提がかなり違います。

Tailwind CSSの公式ドキュメントは、Play CDNを「開発目的専用で、本番向けではない」と明記しています。Tailwind CSS v4もコンテナクエリをコア機能として持っていますが、@containerクラスと@md:接頭辞で明示的に書く方式で、既定のmd:は画面幅基準です。

Lism CSSのProperty Classは、すべてのプロパティとブレークポイントの組み合わせを用意するのではなく、CSS変数と組み合わせてクラス数を抑えています。ClassだけでUIを完結させたいチームにはTailwind CSSやUnoCSSが合い、HTMLを読みやすく保ちながらCSSも書きたいチームにはLism CSSが合います。アトミックCSSの別の選択肢はUnoCSSとは？アトミックCSSエンジンの設定と採用判断を実装目線で解説、Tailwindの現行版の変更点はTailwind CSS v4の主な変更点と新機能の概要で整理しています。

v1.0前の破壊的変更と採用判断

公式changelogは冒頭で、v1.0のリリースまでは大きな変更が続く可能性があると断っています。実際の頻度を2026年8〜9月の記録で数えると次のとおりです。

4週間で4回です。0.26.0の@lism-css/uiはv0.26.0以上のlism-cssを要求し、0.28.0ではUIのCSS変数名（--_item-pから--item-pなど）も変わりました。^0.28.0のようなキャレット指定は、この指定では0.29.0以降へ自動更新されませんが、同じマイナー版内の更新でも表示やAPIが変わらない保証はなく、そのぶん更新は毎回手作業の移行になります。

この頻度を踏まえると、判断は次のように分かれます。

• 向いている：LP、コーポレートサイト、個人ブログなど、公開後にCSSをあまり触らず、版を固定したまま運用できるサイト。CDNの版固定URLだけで完結します。
• 慎重に判断すべき：複数人で長期保守する業務システムや、@lism-css/uiのコンポーネントを多用する構成。更新のたびにchangelogとの突き合わせが発生します。
• 避けたほうがよい：依存を常に最新へ自動更新する運用のプロジェクト。0.x系の破壊的変更をテストで拾えないと、見た目の崩れとして本番に出ます。

配布CSSの容量も確認しておきます。READMEは全体で約30KB（gzip後約8KB）と説明していますが、npmから取得したv0.29.1のmain.cssは39,228バイト、gzip -c（既定の圧縮レベル）で圧縮すると9,727バイトでした。v0.25.0で方向指定の余白クラス18種を追加した際にgzip後で約1.5KB増えたとchangelogにあり、READMEの数値はそれより前のものと考えられます。full.cssは同じ条件で50,100バイト（圧縮後11,963バイト）です。容量を比較する際は、gzipの圧縮レベルとファイル名ヘッダーの有無を揃えて実測してください。

よくある質問

Lism CSSは無料で商用利用できますか？

できます。lism-cssパッケージとGitHubリポジトリのライセンスはMITです。

Lism CSSにビルドツールは必要ですか？

必要ありません。CDNのmain.cssを読み込めば素のHTMLで動きます。既存トークンの値はCSS変数の上書きでも変更できます。設定ファイルをビルドへ反映したり、公式のpurge機能で未使用クラスを削除したりする場合は、@lism-css/pluginとビルド環境が必要です。

レスポンシブ用のクラスが効かないのはなぜですか？

祖先要素にクエリコンテナ（is--container、または独自CSSのcontainer-type指定）が無い可能性が高いです。既定のブレークポイント用クラスはコンテナクエリで発火するため、コンテナが無いと親の幅に関係なく基準値のままになります。

Lism CSSはWordPressテーマSWELLと関係がありますか？

作者が同じです。SWELLの開発者である了がLism CSSを開発しています。lism-cssパッケージ自体はWordPressに依存せず、npmの依存にもSWELLは含まれていません。

Lism CSSはAIのコーディング支援に対応していますか？

対応しています。npx lism-cli skill addでClaude Code等のスキルを配置でき、@lism-css/mcpのMCPサーバーと、https://lism-css.com/llms.txtも公開されています。

関連記事

• CSS Container Queriesで実現するコンポーネント単位のレスポンシブ設計
• Tailwind CSS v4の主な変更点と新機能の概要
• UnoCSSとは？アトミックCSSエンジンの設定と採用判断を実装目線で解説
• Astroフレームワークとは？特徴と使い方・Next.jsとの使い分けを解説【2026年版】
• レスポンシブデザインの作り方｜メディアクエリとブレークポイント設計の実装手順