コンセプト
Lism UI は以下のコンセプトを掲げています。
- どんな環境でも使える。
- 軽量で、汎用性が高い。
- 車輪の再発明からの解放。
Concept 1. どんな環境でも使えるフレームワーク
Lismは、あくまでもHTMLとCSSが主体になっています。
ビルド環境が必要なわけではないので、CSSを読み込むだけで素のHTMLサイトやWordPressサイトでも利用できるものになっています。
（一部、アコーディオンやタブの動作に関するJavaScriptが付属しています。）
ただし、Lism Componentsを使った方が圧倒的に開発体験は向上しますので、基本的には Vite や Next.js、Astro での活用を推奨しています。
Concept 2. 軽量なのに、汎用性が高い。
ビルド不要のCSSフレームワークは他にもありますが、手軽に使用するために用意されている~.all.cssみたいな全部入りCSSファイルを読み込むと容量がかなり大きくなってきます。
特に、容量の面で一番の課題となるのがレスポンシブ対応です。
汎用性を高めるために複数のブレイクポイントに対応したクラスを用意してしまうと、CSSの量が一気に肥大化してしまいます。
そこで、LismではCSS変数とユーティリティクラスの組み合わせ方式を考えました。
CSSの容量を抑えつつ、重要なCSSプロパティに関して簡単にブレイクポイントごとの切り替えができるようになっています。
用意しているCSSの全てを読み込んでもあまり気にならない容量にしつつ、Lismだけでも柔軟なレイアウトを実現できるように意識しています。
また、同じ形式に則ってCSSを追加することで、標準ではサポートしていないプロパティについてもブレイクポイント切り替えが可能になります。
Concept 3. 車輪の再発明からの解放
Lism CSSの方法論としてのコア部分は、TokensとUtilities、Layout Modulesです。
しかし、Lism ではそれだけではなく、実際にすぐに使えるような一般的なコンポーネントも多数用意しています。
アコーディオンやタブなど、どう実装するのが正解か非常に悩ましい要素についても、個人的なベストプラクティスを長期間悩んだ上で実装済みです。(新たなベストプラクティスが出てきた場合は、随時更新していきます。)
似たようなCSS、似たようなHTML、似たようなコンポーネントを何度も書くのはもうおしまいにしましょう。 多くの頻出するデザイン要素に関して、毎回同じコードを書き直す必要はもうありません。
柔軟性があり、軽量で、どんなプロジェクトにも導入できるフレームワークがここにあります。
その他の特徴
- メディアクエリではなく、コンテナクエリを採用しています。
- レイヤー階層・セレクタ優先度まで設計
- レンダリング負荷の高いセレクタを避ける
- 子孫セレクタ（
.foo .bar）を極力使わない :has()も極力使わない
- 子孫セレクタ（
- ダークモードの実装も簡単
- カラーテーマの切り替えも、ルートのクラス名に合わせてトークンの切り替え(CSS変数の上書き)をするだけで実装できます。
Purge(Tree shaking)しやすいCSSの設計
ユーティリティクラスの活用に少し癖がありますが、PurgeCSS などを使って超軽量にできるようになっています。
.-prop@bpの形式で個別のプロパティごとに各ブレイクポイントに対応したクラスが1つずつあるのも、パージしやすくするためでもあります。