Lism CSSの特徴

サイト全体のCSS設計を担う

Lism CSS は単なるユーティリティクラスのパッケージではありません。

• デザイントークンの設計
• クラス名と変数名の命名規則
• レイヤー(@layer)階層の定義

これらを包括的に定義しており、サイト全体のCSS設計を丸ごと引き受けるフレームワークです。（そのかわり、他のCSSフレームワークとの共存は想定していません。）

CSS Layers による詳細度管理も行われており、以下の階層構造で整理されています。

lism-base → lism-modules → lism-utility → lism-custom

lism-base の内部には reset サブレイヤーが含まれており、lism-modules の内部も state・layout・atomic のサブレイヤーに分かれています。

心地よいリズムを生むトークン設計

余白やフォントサイズのスケーリングにこだわったデザイントークンを用意しています。

トークンを使い回すことで、意識せずともデザインに自然なリズムが生まれます。
メンテナンス性と一貫性の向上にもつながる設計です。

参考: タイポグラフィと余白のスケーリング設計について

レイアウトファーストなモジュール設計

WEBサイトで一般的によく使われるレイアウト要素を細分化し、汎用的に使い回せる設計になっています。

これは、Every Layout でのレイアウトプリミティブという思想を参考にしたものです。

• l--flex — Flexboxベースのレイアウト
• l--stack — 縦積みレイアウト
• l--columns — カラムレイアウト
• l--center — 中央寄せレイアウト
• l--switchCols — コンテナ幅に応じて自動で段組みが切り替わるレイアウト

など、多くのレイアウトモジュールが定義されています。

CSS変数を活かしたユーティリティ設計

Lism には Tailwind CSS のように、個々のCSSプロパティに対応するユーティリティクラスがあります。
ただし、すべてのプロパティ × すべてのブレークポイントのクラスを用意するわけではありません。

CSS変数（カスタムプロパティ）と組み合わせる独自の方式により、少ないCSS容量のまま柔軟にレスポンシブ対応ができます。

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

<Box p={[20, 30, 40]} bd>
  BOX
</Box>

たとえば、-p:20 のような基本的なトークンクラスは用意されていますが、md:p-30 のようなブレークポイント付きクラスは提供しません。
かわりに、-p_md クラスと --p_md 変数を組み合わせることで対応します。

CSSを書くことを前提にした設計思想

Lism CSS は、HTMLに全部書く Tailwind CSS とも、JSXにスタイルを閉じ込める CSS-in-JS とも異なるアプローチを取っています。

• 主要なレイアウトや軽い装飾 → クラスとCSS変数でサクっと組む
• 細部のスタイリングや作り込み → ネイティブCSSで丁寧に整える

このバランスを大切にした設計です。
すべてをクラスで完結させるのではなく、CSSを書くべきところはしっかり書くという前提になっています。

メディアクエリに依存しないレイアウト

Lism CSS では、Every Layout の思想を取り入れ、クエリに依存せず、コンテナの幅に応じて自動的にレイアウトが切り替わるモジュールもいくつか用意しています。

• l--fluidCols — コンテナ幅に応じてカラム数が自動調整
• l--switchCols — コンテナ幅に応じて段組みとスタックが自動切替
• l--sideMain — 維持したいコンテンツの長さを基準にしてレイアウトが自動切替

デフォルトでコンテナクエリを採用している

もちろんそれだけではなく、ブレークポイントに基づく従来のレスポンシブ設計も併用できます。
ただし、メディアクエリではなくコンテナクエリをデフォルトで採用している点が特徴的です。

その他、コンテナ要素の中では position: fixed の挙動が変わったりと注意すべき挙動に関しての前提知識が少し必要になってきますが、 その代わり、 コンポーネントが配置場所の幅に応じて自律的にレイアウトを切り替えるため、どこに置いても破綻しない再利用性の高い設計が可能になります。