📘

CSS設計にこれ以上悩みたくないあなたへ。Lism CSS という新しい選択肢

2025/06/12に公開

2件

WEBサイト制作において、CSS設計は永遠の課題ですよね。
モダンCSSの機能は日々進化しています。しかし、これらをどこまで採用してどう組み合わせてサイト全体のCSS設計に落とし込むか？命名規則は？トークン設計は？レイヤー構成は？── プロジェクトごとに、毎回同じ問いと向き合っていませんか？
Tailwind CSS は強力な選択肢ですが、すべてをクラスで完結させようとするNo-CSSなアプローチは極端すぎて合わないという方も多いはず。自由にCSSを書きたい場面もあるでしょう。
CSS設計をまるごと任せられて、かつCSSを書くことも否定しないフレームワーク ── 「Lism CSS」は、そんな新しい選択肢です。

 Lism CSS とは？Lism CSS は、WEBサイトの骨組みをテンポ良く美しく作るための軽量なCSS設計フレームワークです。
サイト全体に自然と心地よいリズムを生み出すタイポグラフィ設計。
ワイヤーフレーム作成が簡単にできるレイアウトファーストなプリミティブ設計。
柔軟でレスポンシブにも対応できるCSS変数を活かしたユーティリティ設計。
https://lism-css.com/
単なるユーティリティクラスを集めたパッケージではありません。

デザイントークンの設計、命名規則、レイヤー(@layer)階層の定義などを包括的に定義しており、サイト全体のCSS設計を丸ごと引き受けるフレームワークです。
Every Layout のレイアウトプリミティブ、Tailwind CSS のユーティリティファーストなアプローチ、ITCSS のレイヤー設計などを融合した、独自のCSS設計になっています。

 Why Lism CSS ?
自分でCSS設計を考えなくてよい。 — ベーススタイリング、@layer 階層、トークン、命名規則まで、サイト全体のCSS設計を丸ごと引き受けます。

CSSを読み込むだけで使える。 — ビルドや設定は不要です。軽量なスタイルシートを一つ読み込むだけですぐに導入できます。

React・Astroでは、より快適に。 — 専用コンポーネントを使えば、レスポンシブ対応やレイアウト構築をpropsで直感的に行えます。

 導入方法
 HTMLサイトで利用する場合HTMLサイトに導入するには、以下のようにCDNサイトからCSSファイルを読み込むだけとなります。
 スタイルシートをCDNから読み込む
<link href="https://cdn.jsdelivr.net/npm/lism-css@0.16.1/dist/css/main.css" rel="stylesheet" />

 ReactやAstroプロジェクトで利用する場合React、Astro、Next.js などのモダンな開発環境では、npmパッケージ（lism-css）の導入が便利です。
 パッケージのインストール
npm install lism-css
 プロジェクトにて
// CSSをグローバルにインポート
import "lism-css/main.css";
HTMLサイトと同じく、上記のCSSファイルをインポートするだけでも導入利用できます。

が、どうせなら Lism 専用のJSXコンポーネントを読み込んで使うことで、より快適に開発できるようになっています。
 プロジェクトにて
// 必要なファイルでコンポーネントをインポート (React)
import { Box, Stack, Flex, Grid, ... } from "lism-css/react";

// Astro の場合
import { Box, Stack, Flex, Grid, ... } from "lism-css/astro";

 Lism CSS のエコシステムLism CSS はコアのCSSライブラリだけでなく、開発をサポートするパッケージ群をOSSとして提供しています。


パッケージ
説明


lism-css
コアCSS + React / Astro レイアウトコンポーネント

@lism-css/ui
アコーディオンやタブ、ボタンリンクなどのUIコンポーネント集

@lism-css/cli
UIコンポーネントをプロジェクトにコピーしてカスタマイズできるCLI

@lism-css/mcp
AIコーディングツール向けのMCPサーバー

すべて無料・オープンソース（MIT）で開発されています。

 Tailwind CSS との違い現在の圧倒的デファクトスタンダード、Tailwind CSS との比較をしてみます。



Lism CSS
Tailwind CSS


ビルド

不要。CSSファイル読み込みだけで動く
本番利用にはビルドツールが必要（CDNはJS実行で開発用）

クラス名
プロパティに則った短縮記法
プロパティ名そのまま or 独自の命名（統一性がない）

設計思想
レイアウト構造と装飾を分離（l--stack -g:20 -p:30）
すべてをユーティリティクラスで記述

レスポンシブ
基礎クラス+CSS変数の組み合わせ
レスポンシブのクラスがそれぞれにある

ブレイクポイントの基準
コンテナクエリ（親要素のサイズ基準）
メディアクエリ（ビューポート基準）

CSS容量
約30KB
ビルド時に使用分のみ生成


 ユーティリティクラスの比較Lism CSSにも単一CSSプロパティに対するユーティリティクラスがありますが、Tailwind のようにすべてのCSSプロパティをカバーしているわけではありません。

主要なものを厳選して提供しており、それによってビルドやパージ処理なしで約30KBという軽量さを実現しています。
また、レスポンシブ対応もかなりでは、ブレイクポイントごとにクラスを大量生成するのではなく、CSS変数と組み合わせることでクラスの総数を抑えています（詳しくは後述）。
例えば、ざっくりとですが以下のようなクラスの違いが見てとれます。



Lism CSS
Tailwind CSS


padding

-p:10, -p:20,...

p-4, p-8,...

font-size

-fz:l, -fz:xl,...

text-lg, text-xl,...

font-whight

-fw:bold, -fw:thin,...

font-bold, font-thin,...

color

-c:text, -c:text-2, -c + --c:var(--red)...

text-gray-900, text-gray-700, text-red-500,...

background-color

-bgc:base, -bgc:base-2,...

bg-gray-50, bg-gray-100,...

任意値

-p + --p:10px

p-[10px]

レスポンシブ

-p:10 -p_md + --p_md:var(--s20)

py-4 md:py-8

Lism のこれらのクラス名は-{prop}:{value}形式で統一されています。CSSプロパティの省略形を用いて慣いますが、省略ルールに一貫性があるため、一部の例外だけ覚えておけばあとは推測しやすくなっていきます。

 レイアウト手法の比較Lismには、l--center や l--columns などのレイアウトクラスが用意されており、これを見ればレイアウト構造が一目でわかるのも大きな特徴です。


Lism CSS
Tailwind CSS


l--flex -jc:center
flex justify-center

l--cluster
flex items-center flex-wrap

l--center
grid place-content-center place-items-center


l--columns -cols_sm + --cols:2;--cols_sm:4

grid grid-cols-2 sm:grid-cols-4


l--autoColumns + --cols:16rem;

grid [grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))]

などなど。

 Lismには普通のユーティリティクラスもあるtailwindのようなクラスもありますが、u--cbox, u--trim, u--srOnly のような、いわゆる普通のユーティリティクラスというのもLismでは許容されており、コアCSSにも一部含まれています。
ユーザーは必要に応じて、@layer lism-utilityに対して自由にユーティリティクラスを定義できます。

 Lism CSS の特徴ここからは、Lism CSSの特徴についてもう少し詳しく解説していきます。

 1. レイアウトファーストなプリミティブ設計Lism CSSは、「Every Layout」のレイアウトプリミティブな考え方に大きなインスピレーションを受けています。そのため、Lismにはいくつかのユーティリティクラスの種類があるものの、「レイアウトファースト」なプリミティブベースの設計思想になっています。
大枠のレイアウトをまず組んでから、装飾的な部分を細かいユーティリティクラスで補完するという方針です。
<!-- レイアウトプリミティブ + Property Class -->
<div class="l--stack -g:20 -p:30 -bgc:base-2">
  <h2>見出し</h2>
  <p>コンテンツ...</p>
</div>

 2. レイヤー階層による明確な CSS 設計Lism CSS では、CSS Layers（@layer）による詳細度管理を採用し、階層構造を明確に定義することで詳細度の複雑化を防いでいます。


レイヤー
役割
@layer


Base
Reset CSS、トークン定義、Set Class をセットするレイヤー。
@lism-base

Trait
Trait クラス（.is--, .has--）で要素の役割・機能を宣言するレイヤー。
@lism-trait

Primitive
Layout Primitive（.l--）と Atomic Primitive（.a--）を定義するレイヤー。
@lism-primitive

Component
BEM 構造を持つコンポーネントクラス（.c--）を定義するレイヤー。
@lism-component

Custom
カスタマイズ用のレイヤー。
@lism-custom

Utility Class
用途が明確な装飾・機能をまとめたユーティリティクラス（.u--）を定義するレイヤー。
@lism-utility

Property Class
単一 CSS プロパティに紐づくクラスをレイヤー外で定義。詳細度が最も高い。
-

この階層構造により、CSS 設計の見通しが良くなり、長期的なメンテナンスが容易になります。

 3. デザイントークンによる一貫性カラー、スペース、タイポグラフィ、シャドウなど、主要なプロパティに対して段階的・またはセマンティックなプリセット値を CSS 変数として定義しています。
/* スペーストークン（フィボナッチ数列ベース・--s-unitを基準） */
--s5:  calc(0.5 * var(--s-unit));  /* ≒ 4px */
--s10: var(--s-unit);              /* ≒ 8px */
--s15: calc(1.5 * var(--s-unit));  /* ≒ 12px */
--s20: calc(2 * var(--s-unit));    /* ≒ 16px */
--s30: calc(3 * var(--s-unit));    /* ≒ 24px */
--s40: calc(5 * var(--s-unit));    /* ≒ 40px */
--s50: calc(8 * var(--s-unit));    /* ≒ 64px */
...

/* セマンティックカラートークン */
--base: hsl(224 4% 99%);     /* ベース背景色 */
--base-2: hsl(224 8% 95%);   /* 補助背景色 */
--text: hsl(224 4% 8%);      /* テキスト色 */
--text-2: hsl(224 6% 32%);   /* 補助テキスト色 */
--brand: #1e5f8c;            /* ブランド色 */
--accent: #d94a6a;           /* アクセント色 */

/* パレットカラー（OKLCHベース・--Lと--Cで全体の色味を調整可能） */
--red: oklch(var(--L) var(--C) 20);
--blue: oklch(calc(var(--L) - 2%) calc(var(--C) + 0.01) 260);
--green: oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152);
...

/* 倍音列に基づくフォントサイズ（分子8の調和数列・--REMを基準） */
--fz-mol: 8;
--fz--5xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 6));
--fz--4xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 5));
--fz--3xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 4));
--fz--2xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 3));
--fz--xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 2));
--fz--l: calc(1em * var(--fz-mol) / (var(--fz-mol) - 1));
--fz--m: 1em;
--fz--s: calc(1em * var(--fz-mol) / (var(--fz-mol) + 1));
--fz--xs: calc(1em * var(--fz-mol) / (var(--fz-mol) + 2));
--fz--2xs: calc(1em * var(--fz-mol) / (var(--fz-mol) + 3));
スペーストークンにはフィボナッチ数列、フォントサイズには倍音列（調和数列）という、自然界や音楽に現れる比率を採用しています。これにより、トークンの中からどの値を組み合わせて選んでも自然で調和のとれたバランスになりやすく、デザインが破綻しにくいという利点があります。
参考: タイポグラフィと余白のスケーリング設計について
トークン一覧ページはこちら

 4. 単一CSSプロパティに対するのユーティリティクラス特定のCSSプロパティとその値の組み合わせについて、-{prop}:{value}という形式で定義しています。

Lism CSS では、これらを Property Classと呼んでいます。(Utility クラスはまた別であります。)
 例
.-p\:10 { padding: var(--s10) }
.-px\:20 { padding-inline: var(--s20) }
.-fz\:l { font-size: var(--fz--l) }
.-bxsh\:20 { box-shadow: var(--bxsh--20) }
.-d\:none { display: none }
.-ta\:center { text-align: center }
Tailwind CSSのように全プロパティに対して用意しているわけではなく、主要なものに絞って提供しています。

必要に応じて、ユーザーは同じ書式で追加定義することも可能です。
Lism CSS の Property Class 一覧はこちら

 5. 独自のレスポンシブ対応Lism CSS の最も特徴的な機能の一つが、CSS 変数とクラスを組み合わせたレスポンシブ対応です。
先ほど紹介した Property Class の派生クラスとして、-{prop}_{bp}という形式のレスポンシブ対応用のクラスを定義しています。
 例
.-p{ padding: var(--p); }

/* @sm ~ */
@container (min-width: 480px) {
  .-p_sm{ padding: var(--p_sm); }
}

/* @md ~ */
@container (min-width: 800px) {
  .-p_md{ padding: var(--p_md); }
}
こちらについても、全てのCSSプロパティに対して用意されているわけではありません。Property Classの中でさらにこのレスポンシブクラスがあるものは絞られています。

（SCSSで読み込む場合はカスタマイズで増やすことも可能）
例えば、padding を 20 → 30 → 50 と切り替えるには次のようにします。
html
<div class="-p:20 -p_sm -p_md -bd" style="--p_sm:var(--s30);--p_md:var(--s50)">
  <p>Example</p>
</div>
上記は専用コンポーネントを使えば、より簡潔に記述できます：
jsx
<Lism p={[20, 30, 50]} bd>
  <p>Example</p>
</Lism>

 6. コンテナクエリの採用Lism CSS では、コンテナクエリをデフォルトで採用しています。
従来のメディアクエリはビューポート（画面全体）の幅を基準にするため、同じコンポーネントでもメインカラムとサイドバーで別々の対応が必要になることがありました。コンテナクエリなら親要素の幅に応じて切り替わるので、同じコンポーネントをどこに配置しても適切にレイアウトが切り替わります。
!コンテナクエリでは、レスポンシブに値を切り替えるには先祖要素でコンテナ定義をしておく必要があることに注意してください。

Lismでは、先祖要素でis--containerクラスをセットしておく必要があります。

 7. ある程度CSSを書くことを前提にした設計Lism CSS は、Tailwind CSS のようにすべてをクラスで完結させるアプローチとも、CSS-in-JS のようにJSXにスタイルを閉じ込めるアプローチとも異なります。

主要なレイアウトや軽い装飾 → クラスとCSS変数でサクっと組む

細部のスタイリングや作り込み → ネイティブCSSで丁寧に整える
このバランスを大切にしており、CSSを書くべきところはしっかり書くという前提の設計になっています。
Lismの設計に則り、足りないクラスを追加したり細部のCSSを自分で書き足しながらご利用ください。

 主要なレイアウトプリミティブLism CSS で定義されているレイアウトプリミティブをいくつか紹介します。

 Stack (l--stack)子要素を縦方向に積み重ねるflexboxレイアウトを提供します（flex-direction: column）。
html
<div class="l--stack -g:20">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
セクション全体の骨組み、フォーム、カード内のコンテンツ配置など、あらゆる場面で使います。

 Flow (l--flow)記事本文などのフローコンテンツの余白を自動管理するコンポーネントです。子要素間の margin-block-start で余白を管理します。
見出し（h1〜h6）の前だけ余白が自動で大きくなるなどの調整がされているため、コンテンツエリアの余白管理に適しています。
html
<div class="l--flow">
  <p>テキスト...</p>
  <p>テキスト...</p>
  <h2>見出し</h2>
  <p>テキスト...</p>
</div>

 Flex (l--flex)Flexboxで横並びレイアウトを実現します。
html
<div class="l--flex -fxw:wrap -g:20 -jc:center">
  <div>Flex Content</div>
  <div>Flex Content</div>
  <div>Flex Content</div>
</div>

 Grid (l--grid)Grid レイアウトを組み立てるコンポーネントです。
html
<div class="l--grid -g:20 -gtc_sm" style="--gtc:1fr 1fr;--gtc_sm:1fr 2fr">
  <div class="l--box -p:30 -bgc:base-2">A</div>
  <div class="l--box -p:30 -bgc:base-2">B</div>
</div>
jsx
<Grid gtc={['1fr 1fr', '1fr 2fr']} g='20'>
  <Box p='30' bgc='base-2'>A</Box>
  <Box p='30' bgc='base-2'>B</Box>
</Grid>

 Center (l--center)内部の要素を上下左右中央揃えで配置するためのコンポーネントです。
html
<div class="l--center -g:10 -ar:3/2">
  <p class="-fz:l">TEXT</p>
  <p class="-fz:s">Lorem ipsum dolor sit amet.</p>
</div>
jsx
<Center g='10' ar='3/2'>
  <Text fz='l'>TEXT</Text>
  <Text fz='s'>Lorem ipsum dolor sit amet.</Text>
</Center>

 Columns (l--columns)指定した列数でカラムレイアウトを作成できるコンポーネントです。
html
<div class="l--columns -g:30" style="--cols:1;--cols_sm:2;--cols_md:3">
  <div class="-bgc:base-2 -p:30">Box1</div>
  <div class="-bgc:base-2 -p:30">Box2</div>
  <div class="-bgc:base-2 -p:30">Box3</div>
  ...
</div>
jsx
<Columns cols={[1, 2, 3]} g='30'>
  <Lism bgc='base-2' p='30'>Box1</Lism>
  <Lism bgc='base-2' p='30'>Box2</Lism>
  <Lism bgc='base-2' p='30'>Box3</Lism>
  ...
</Columns>

 WithSide (l--withSide)メディアクエリやコンテナクエリに依存せず、メインコンテンツの幅を基準にして横並びと縦並びの切り替えを自動で行う2カラムレイアウトを作成できます。
html
<div class='l--withSide -g:30' style='--sideW:12rem;--mainW:20rem'>
  <div class='l--box -p:20 -bd' style='--bdc:var(--blue)'>
    <p>Main Content</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.</p>
  </div>
  <div class='l--box is--side -p:20 -bd' style='--bdc:var(--red)'>
    <p>Side Content</p>
  </div>
</div>
jsx
<WithSide sideW='12rem' mainW='20rem' g='30'>
  <Box p='20' bd bdc='blue'>
    <p>Main Content</p>
    <Dummy />
  </Box>
  <Box isSide p='20' bd bdc='red'>
    <p>Side Content</p>
  </Box>
</WithSide>

 Utility クラスの例用途が明確なデザイン的な装飾を担う機能は、u--ではじまるユーティリティクラスを定義して利用します。
Utilityクラス一覧はこちら

 例: u--cbox--keycolorで指定したキーカラーをベースに、ボックスをカラーリングするユーティリティクラスです。
html
<div class='u--cbox -p:30' style='--keycolor:var(--blue)'>...</div>
<div class='u--cbox -bd -p:30' style='--keycolor:var(--red)'>...</div>
<div class='u--cbox -bd -p:30' style='--keycolor:var(--purple)'>...</div>
<div class='u--cbox -bd-x-s -p:30' style='--keycolor:#688f04;--bdw:4px;'>...</div>
jsx
<Lism className='u--cbox' keycolor='blue' p='30'>...</Lism>
<Lism className='u--cbox' keycolor='red' bd p='30'>...</Lism>
<Lism className='u--cbox' keycolor='purple' bd p='30'>...</Lism>
<Lism className='u--cbox' keycolor='#688f04' bd-x-s bdw='4px' p='30'>...</Lism>

 Lism UIコンポーネント (@lism-css/ui)レイアウトだけでなく、インタラクティブなUIコンポーネントも @lism-css/ui パッケージとして開発中です。
Accordion, Modal, Tabs, Button, Badge など、WEBサイトで頻出するコンポーネントが揃っています（今後たくさん揃えていく予定です）。これらは Lism CSS のクラス設計（.c-- プレフィックス）に沿って構築されています。
jsx (React)
import { Accordion } from '@lism-css/ui/react';

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Heading as='h3'>
      <Accordion.Button p='20'>よくある質問</Accordion.Button>
    </Accordion.Heading>
    <Accordion.Panel p='20'>
      回答のコンテンツ...
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>
jsx (React)
import { Button } from '@lism-css/ui/react';

<Button href='/contact' variant='fill'>お問い合わせ</Button>
<Button href='/about' variant='outline'>詳しく見る</Button>
各コンポーネントは Lism の Props をそのまま受け取れるので、p, g, bgc, bdrs などで自由にスタイルを調整できます。あくまで「一つの実装例」として提供しているため、プロジェクトの要件に合わせてカスタマイズしてお使いください。

 CLI でプロジェクトにコピーすることも可能@lism-css/cli を使うと、UIコンポーネントのソースコードを自分のプロジェクトにコピーし、自由にカスタマイズできます。
# コンポーネントを追加（初回は対話形式でセットアップ）
npx @lism-css/cli add accordion

# 複数コンポーネントをまとめて追加
npx @lism-css/cli add accordion modal tabs

# 全コンポーネントを追加
npx @lism-css/cli add --all
UIコンポーネント一覧はこちら

 コピペで使える Astro テンプレート公式ドキュメントサイトでは、多数のAstroテンプレートを公開しています。
CTA、Feature、Navigation、News、Price Table、Member、Section など、WEBサイトでよく使われるセクションを 13カテゴリ にわたって用意しており、プレビューを確認しながらソースコードをそのままコピペして使えます。
テンプレートはすべて Lism CSS の Astro コンポーネントで構築されているため、Lism の設計に沿ったマークアップの実例としても参考になります。
テンプレート一覧はこちら

 AIコーディング支援について
 llms.txtLLM向けのドキュメント情報を llms.txt として公開しています。
https://lism-css.com/llms.txt

 MCP サーバーLism CSS は、MCPサーバー（@lism-css/mcp）を公式に提供しています。
Claude Code や Cursor、VS Code (GitHub Copilot) などのAIコーディングツールと連携し、AIがLism CSSの最新ドキュメントやAPI情報を直接参照しながらコーディングを支援してくれます。
 セットアップ（Claude Codeの場合）
claude mcp add lism-css -- npx -y @lism-css/mcp
 Cursor / Windsurf の場合（.cursor/mcp.json）
{
  "mcpServers": {
    "lism-css": {
      "command": "npx",
      "args": ["-y", "@lism-css/mcp"]
    }
  }
}
MCPサーバーでは以下の6つのツールが利用でき、AIがこれらを自動的に呼び出して正確なコードを生成してくれるよう、調整中です。


ツール
説明


get_overview
フレームワークの全体像を取得

get_tokens
デザイントークン（色、余白、フォントサイズ等）を参照

get_props_system
Props → CSS クラス・スタイルの変換ルールを参照

get_component
コンポーネントの詳細（props、使い方、構成）を取得

search_docs
ドキュメント全文検索

convert_css
既存のCSSコードを Lism CSS の記法に変換

独自の命名規則に不安がある方でも、MCPサーバーを活用すればAIが正しいクラス名やProps指定をガイドしてくれるので、学習コストを大幅に下げることができます。

 まとめLism CSS は、モダンな CSS 機能（@layer、コンテナクエリ、CSS 変数、color-mix()など）を積極的に活用しながら、サイト全体のCSS設計を丸ごと引き受けるフレームワークとして設計されています。

軽量：必要最小限の CSS で、約30KB（gzip時 約8KB）から利用可能。

ゼロビルド：CSSを読み込むだけで導入可能。ビルドツールや設定は不要。

CSS設計を丸ごと引き受ける：トークン、レイヤー階層、命名規則まで包括的に提供。

CSSを書くことを前提：すべてをクラスで完結させず、CSSを書くべきところは書く設計思想。

充実したエコシステム：UIコンポーネント、CLI、MCPサーバーなどを公式パッケージで提供。

AI連携：公式MCPサーバーとllms.txtにより、AIコーディングツールが最新情報を参照してコードを生成。
独自の命名規則に最初は戸惑うかもしれませんが、MCPサーバーを活用すればAIがガイドしてくれますし、慣れてくればとても直感的に使用できるようになります。
WEBサイト制作の効率化と品質向上の両方求める方々にとって、Lism CSS が強力なサポーターとなれるよう、引き続き開発を続けていきます。
1ミリでも気になった方は、ぜひ一度、詳細な公式ドキュメントをご覧いただき、実際に触ってみてください。
また、Githubでスターをポチッと押していただけるだけでも励みになります！
リポジトリ: https://github.com/lism-css/lism-css
使ってみて何かご意見ご感想等ありましたら、github の issue か、もしくはDiscordサーバーに参加して投げていただけますと非常に嬉しいです。

パッケージ	説明
`lism-css`	コアCSS + React / Astro レイアウトコンポーネント
`@lism-css/ui`	アコーディオンやタブ、ボタンリンクなどのUIコンポーネント集
`@lism-css/cli`	UIコンポーネントをプロジェクトにコピーしてカスタマイズできるCLI
`@lism-css/mcp`	AIコーディングツール向けのMCPサーバー

	Lism CSS	Tailwind CSS
ビルド	不要。CSSファイル読み込みだけで動く	本番利用にはビルドツールが必要（CDNはJS実行で開発用）
クラス名	プロパティに則った短縮記法	プロパティ名そのまま or 独自の命名（統一性がない）
設計思想	レイアウト構造と装飾を分離（`l--stack -g:20 -p:30`）	すべてをユーティリティクラスで記述
レスポンシブ	基礎クラス+CSS変数の組み合わせ	レスポンシブのクラスがそれぞれにある
ブレイクポイントの基準	コンテナクエリ（親要素のサイズ基準）	メディアクエリ（ビューポート基準）
CSS容量	約30KB	ビルド時に使用分のみ生成

	Lism CSS	Tailwind CSS
padding	`-p:10`, `-p:20`,...	`p-4`, `p-8`,...
font-size	`-fz:l`, `-fz:xl`,...	`text-lg`, `text-xl`,...
font-whight	`-fw:bold`, `-fw:thin`,...	`font-bold`, `font-thin`,...
color	`-c:text`, `-c:text-2`, `-c` + `--c:var(--red)`...	`text-gray-900`, `text-gray-700`, `text-red-500`,...
background-color	`-bgc:base`, `-bgc:base-2`,...	`bg-gray-50`, `bg-gray-100`,...
任意値	`-p` + `--p:10px`	`p-[10px]`
レスポンシブ	`-p:10 -p_md` + `--p_md:var(--s20)`	`py-4 md:py-8`

Lism CSS	Tailwind CSS
`l--flex -jc:center`	`flex justify-center`
`l--cluster`	`flex items-center flex-wrap`
`l--center`	`grid place-content-center place-items-center`
`l--columns -cols_sm` + `--cols:2;--cols_sm:4`	`grid grid-cols-2 sm:grid-cols-4`
`l--autoColumns` + `--cols:16rem;`	`grid [grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))]`

レイヤー	役割	@layer
Base	Reset CSS、トークン定義、Set Class をセットするレイヤー。	`@lism-base`
Trait	Trait クラス（`.is--`, `.has--`）で要素の役割・機能を宣言するレイヤー。	`@lism-trait`
Primitive	Layout Primitive（`.l--`）と Atomic Primitive（`.a--`）を定義するレイヤー。	`@lism-primitive`
Component	BEM 構造を持つコンポーネントクラス（`.c--`）を定義するレイヤー。	`@lism-component`
Custom	カスタマイズ用のレイヤー。	`@lism-custom`
Utility Class	用途が明確な装飾・機能をまとめたユーティリティクラス（`.u--`）を定義するレイヤー。	`@lism-utility`
Property Class	単一 CSS プロパティに紐づくクラスをレイヤー外で定義。詳細度が最も高い。	-

ツール	説明
`get_overview`	フレームワークの全体像を取得
`get_tokens`	デザイントークン（色、余白、フォントサイズ等）を参照
`get_props_system`	Props → CSS クラス・スタイルの変換ルールを参照
`get_component`	コンポーネントの詳細（props、使い方、構成）を取得
`search_docs`	ドキュメント全文検索
`convert_css`	既存のCSSコードを Lism CSS の記法に変換

Discussion

juner

コンテナクエリでは、レスポンシブに値を切り替えるには先祖要素でコンテナ定義をしておく必要があることに注意してください。
これは 小さなビューポート単位として利用できるのでは……？
クエリに該当するコンテナーが利用できない場合、コンテナーのクエリー長の単位は、既定でその軸の小さなビューポート単位 (sv*) に設定されます。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_containment/Container_queries#コンテナークエリーの長さ単位

了

コメントありがとうございます。すみません、私が書いた”コンテナ定義しておく必要がある”というのはcontainer-type: inline-size;を宣言しておかないとコンテナサイズの利用がうまく利用できない、という意味でした。cqiとかはそれがなくともsv*の値が入ってくると思いますが、@container (min-width: 480px)などのコンテナクエリでプロパティ切り替えようとすると、意図した動作になりませんので注意が必要です...という内容の文言でした（省略しすぎて申し訳ないです）

CSS設計にこれ以上悩みたくないあなたへ。Lism CSS という新しい選択肢

Lism CSS とは？

Why Lism CSS ?

導入方法

HTMLサイトで利用する場合

ReactやAstroプロジェクトで利用する場合

Lism CSS のエコシステム

Tailwind CSS との違い

ユーティリティクラスの比較

レイアウト手法の比較

Lismには普通のユーティリティクラスもある

Lism CSS の特徴

1. レイアウトファーストなプリミティブ設計

2. レイヤー階層による明確な CSS 設計

3. デザイントークンによる一貫性

4. 単一CSSプロパティに対するのユーティリティクラス

5. 独自のレスポンシブ対応

6. コンテナクエリの採用

7. ある程度CSSを書くことを前提にした設計

主要なレイアウトプリミティブ

Stack (`l--stack`)

Flow (`l--flow`)

Flex (`l--flex`)

Grid (`l--grid`)

Center (`l--center`)

Columns (`l--columns`)

WithSide (`l--withSide`)

Utility クラスの例

例: u--cbox

Lism UIコンポーネント (`@lism-css/ui`)

CLI でプロジェクトにコピーすることも可能

コピペで使える Astro テンプレート

AIコーディング支援について

llms.txt

MCP サーバー

まとめ

Discussion