CSS のレイヤーと強さの順番

CSS では、同じ要素に2つのスタイルが当たると、どちらが勝つかで見た目が変わります。Lism は、この「勝ち負けの順番」をレイヤーという段で決めています。このページでは、その段の並びと、クラスの種類ごとの役割を説明します。

@layer とは#

@layer は、CSS を「段」に分けて、段ごとに強さを決める CSS の機能です。

• 先に名前を宣言した段ほど弱く、あとの段ほど強くなります
• 段が違えば、セレクタの書き方（詳細度）に関係なく、あとの段が勝ちます
• どの段にも入っていない CSS は、すべての段より強くなります

@layer base, utility;

@layer utility { p { color: blue; } }
@layer base { p { color: red; } }
/* 文字は blue になる（utility の段のほうがあと） */

段を分けておくと、「なぜかこのスタイルが効かない」という詳細度（セレクタの強さ）の取り合いが起きにくくなります。

Lism のレイヤーの順番#

Lism の main.css は、最初に次の順で段を宣言しています。

@layer lism-base, lism-block, lism-trait, lism-primitive, lism-custom, lism-utility;

上の表ほど弱く、下ほど強くなります。

いちばん強いのは Property Class#

-p:20 のような Property Class だけは、どの段にも入っていません。段の外の CSS はすべての段より強いので、Property Class は Lism のほかのクラスに必ず勝ちます。

段の外にあるので、Lism を使っていない CSS ともある程度一緒に使えるようになっています。

<div class="l--stack -g:10 -p:20 -bd">
  <div class="-p:20 -bgc:base-2">-p:20</div>
  <div class="-p:10 -bgc:base-2">-p:10（内側の余白が小さい）</div>
</div>

lism-block がわざと弱い理由#

lism-block は lism-base のすぐ上の、弱い段にあります。そのため、同じ要素に is--・has--・l-- などのクラスを付けると、b-- の土台のスタイルは必ずそちらに負けます。付けた順番は関係なく、段の位置で決まります。部品の見た目を、その場でクラスを足して変えられるようにするためです。

クラスの種類#

Lism のクラスは、名前の頭（プレフィックス）で種類が分かります。名前の付け方は 名前のルール、見分け方の早見表は クラスの種類と見分け方 にもあります。

Set Class（set--）#

lism-base の段に入るクラスです。HTML の要素の基本の見た目を整えたり、CSS 変数をまとめてセットしたりします。

くわしくは Set Class（set--*）。

Primitive Class（l--・a--）#

レイアウトを組み立てる小さな積み木です。2種類あります。

Primitive Class は1つで役目を果たすクラスです。種類違い（バリエーション）や、子要素用のクラスは持ちません。

同じ要素に付けるときは、次の決まりがあります。

くわしくは Primitive ってなに？。

Trait Class（is--・has--）#

要素に「役割」を名乗らせたり、「機能」を足したりするクラスです。

2つの違いは次のとおりです。

くわしくは Trait Class ってなに？。

Block Class（b--）#

ボタン・バッジ・カードくらいの大きさの、サイトのあちこちで使う部品のためのクラスです。土台の見た目は CSS のほうに書いておきます。

@layer lism-block {
  .b--btn { /* ... */ }
}

Lism 本体は b-- のクラスを1つも持っていません。lism-block という段を用意しているだけです。

b-- にしてよいのは、次の3つをすべて満たす部品だけです。1つでも当てはまらなければ c-- にします。

1. いくつものページ・場所でくり返し使う
2. クラスを1つ付けるだけで、土台の見た目がほぼ決まってほしい
3. ボタン・バッジ・カードくらいの、それだけで完結する部品

b-- は BEM（Block・Modifier・Element に分けて名前を付けるやり方）の形を持てます。

部品そのもののクラスどうし（b--xxx と b--yyy）を同じ要素に付けるのは、基本的にだめです。

Custom Class（c--）#

Lism に入っていない、自分で自由に作るクラスです。lism-custom の段に対応しています。ページの部品・ヘッダーやサイドバーのような場所・そのページだけの要素など、大きさを問わず使えます。

• 見た目は、Lism のほかのクラスを組み合わせて作るのが基本です
• Property Class などでは作れない込み入ったスタイルは、@layer lism-custom の中に書きます
• CSS を書かずに、「これは何の部品か」を表す名札として付けるだけでもかまいません

@layer lism-custom {
  .c--header { /* ... */ }
  .c--pricing { /* ... */ }
}

名前は c-- のあとを camelCase（myComponent のように、2語目から頭を大文字にする書き方）にします。そのページだけの要素は、c--landingHero のようにページの名前を入れると、どこの要素かすぐ分かります。

c-- も、b-- と同じ BEM の書き方と、一緒に付けるときの決まりで使えます。

Utility Class（u--）#

飾りや機能として、用途がはっきりしたクラスです。

くわしくは Utility Class（u--*）。

Property Class（-{prop}:{value}）#

CSS のプロパティ1つに対応するクラスです。よく使う値やトークンの値ごとにクラスがあり、画面の幅での切り替えにも使えます。形は3つあります。

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

<Lism p={[20, 40, 50]} bd>
  BOX
</Lism>

くわしくは Property Class の書き方 と 画面の幅で切り替える（レスポンシブ）。

自分のクラスを足す・上書きする#

set--・is--・has--・l--・a--・u--・-{prop}:{value} と同じ種類のクラスを自分で足すときは、同じ頭の文字を使い、その種類の段の中に書きます。

Lism のクラスを上書きするときも、そのクラスがある段の中で書きます。たとえば set-- を書き直すなら @layer lism-base の中です。そのうえで、次のどちらかで強くします。

• main.css よりあとに読み込む CSS に書く
• .set--plain.set--plain のように、同じクラス名を2回続けて強くする

@layer lism-base {
  /* 新しく足す */
  .set--hoge { /* ... */ }

  /* 上書き */
  .set--plain.set--plain { /* ... */ }
}

動きのある状態は data 属性で表す#

JavaScript で付けたり外したりする「開いている」「選ばれている」のような状態は、クラスではなく data 属性で表します。例：[data-opened]・[data-active]。

関連するページ#

• Lism CSS の特長
• 名前のルール（省略のしかた）
• クラスの種類と見分け方
• CSS ファイルの種類：@layer を使わない CSS ファイル