CSSファイルの種類

lism-css パッケージは、用途に応じて複数のビルド済みCSSを同梱しています。読み込むファイルを差し替えるだけで、@layer のオン / オフを切り替えたり、全部入りビルドに変更したりできます。通常は main.css を使い、必要なときだけほかのファイルに切り替えてください。

@layer をオフにする

lism-css/main.css の代わりに lism-css/main_no_layer.css を読み込むと、@layer をオフにできます。ほかの設定は不要です。

@layer なし版は、既存サイトや WordPress テーマなど、ほかのCSSとの優先順位（カスケード）を自分で制御できない環境での利用を想定しています。レイヤーで優先順位を付けられないぶん、次の方法で main.css と同じ「Property Class > Utility Class > そのほかのクラス」の順を再現しています。

そのため、@layer なし版では次の点に注意してください。

• Property Class と同じプロパティをインラインスタイルや JavaScript で指定しても、Property Class が勝ちます。値を変えるにはクラス自体を付け替えてください（-p のようにCSS変数で値を受け取るクラスは、--p の書き換えでも変えられます）。
• Utility Class を自分のCSSで上書きするには、.u--trim.u--trim 以上の詳細度が必要です。
• lism.config.js の defaultImportant: false や SCSS の $default_important: 0 を指定しても、@layer なし版では無視され、!important は常に付きます。props の個別設定 important: 0 も同様です。

全部入りビルド（full.css）を使う

lism-css/main.css の代わりに lism-css/full.css を読み込むと、main.css には含まれないクラスまで収録した全部入りビルドを利用できます。

import 'lism-css/full.css'; // @layer なし版は 'lism-css/full_no_layer.css'

full.css には、main.css の内容に加えて以下が含まれます。

• 全 Property Class のブレイクポイント対応クラス（-ta_lg など）。ただし次のものは対象外です。
  • 変数出力専用のプロパティ（isVar 系。クラスを出力せず、CSS変数だけを出力するもの）
  • border ショートハンド系（bd と、bd-x などの方向指定）
  • lh
• border サブプロパティ bds / bdc のブレイクポイント対応クラス。どちらも変数出力専用ですが、例外として追加されます（bdw は main.css でも対応済み）。border のブレイクポイント対応は、ショートハンドではなくサブプロパティで行います。
• カラー系 Property Class（bgc / c / bdc）の全カラートークン分のクラス（-bgc:red など）。main.css では厳選したセマンティックカラーと keycolor だけがクラス化されますが、full.css ではパレットカラーを含む全トークンが対象になります。

そのぶんCSSサイズは main.css より大きくなるため、未使用のクラスをビルド時に削除する CSS Purge との併用を前提としています。