CSS ファイルの種類

lism-css のパッケージには、すぐ使える CSS ファイルがいくつか入っています。読み込むファイルを取りかえるだけで、@layer（CSS の強さの段）を使うかどうかや、クラスを全部入れるかどうかを選べます。迷ったら main.css を選びます。ほかのファイルは、わけがあるときだけ使います。

ファイルの一覧#

import 'lism-css/main.css';

読み込み方そのものは 読み込み方（インストール） で説明しています。

@layer をオフにする#

lism-css/main.css のかわりに lism-css/main_no_layer.css を読み込むと、@layer を使わない CSS になります。ほかに設定することはありません。

import 'lism-css/main_no_layer.css';

どんなときに使う？#

もとからあるサイトや WordPress のテーマのように、ほかの CSS との強さの順番を自分で決められない場所で使うための版です。

@layer が無いと、段で強さを決められません。そこでこの版では、次のやり方で main.css と同じ「Property Class ＞ Utility Class ＞ そのほかのクラス」の強さの順を作っています。

詳細度（セレクタの強さ）は「id の数・クラスの数・要素の数」を並べて書きます。0-2-0 はクラス2つぶんの強さです。!important を付けたスタイルは、ふつうのスタイルより強くなります。

気をつけること#

全部入りの版（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 など）。ただし、次のものは入りません
  • CSS 変数だけを書き出し、クラスを書き出さないプロパティ（isVar の仲間）
  • 枠線をまとめて決める bd と、bd-x などの向きを付けたもの
  • lh
• 枠線の種類 bds と色 bdc の、画面の幅で切り替えるクラス。どちらも本来は CSS 変数だけを書き出すプロパティですが、特別に入っています（bdw は main.css にもあります）。枠線を幅で切り替えるときは、bd ではなく、この bds・bdc・bdw を使います
• 色のクラス（bgc・c・bdc）の、すべての色のトークンぶんのクラス（-bgc:red など）。main.css には、えらんだ一部の意味の色（セマンティックカラー）と keycolor しかありませんが、full.css にはパレットカラーもふくめた全部の色があります（色のトークン）

そのぶん、ファイルは main.css より大きくなります。使っていないクラスを、作るときに消す CSS Purge と一緒に使うことが前提です（使わない CSS を消す（CSS Purge））。

関連するページ#

• 読み込み方（インストール）
• CSS のレイヤーと強さの順番
• 使わない CSS を消す（CSS Purge）
• lism.config.js で設定する