【CSS】@layer（カスケードレイヤー）で詳細度問題を解消

  • 投稿日
  • 著者 くまだ
  • カテゴリー 未分類

どうも、くまだです。

CSSの@layer（カスケードレイヤー）について。

@layerとは

@layer は、スタイルの優先順位を「宣言した順番」で決める仕組みです。

@layer foundation, layout, component, project, utility;

この 1 行だけで、5 つのレイヤーの優先順位が確定します。右にあるものほど強い、というシンプルなルールです。

例えば

以下のように記述した場合、背景色は赤になります。

@layer component {
  .c-button { background: blue; }
}

@layer utility {
  .c-button { background: red; }
}

CSS の優先順位に、レイヤー順という新しい階層が入ります。

強さルール
1!important
2インラインスタイル
3レイヤー順（後ろほど強い）
4詳細度
5記述順

レイヤー順が詳細度より上に入ることになります。

FLOCSSを使っているなら、そのプレフィックスをそのままレイヤー名に置き換えればレイヤー設計が終わります。（layer名は一例です）

FLOCSS@layer 名役割
foundation（reset / base）foundationリセット・要素デフォルト
l-layoutヘッダー・フッターなど大枠の配置
c-componentボタン・カードなど汎用パーツ
p-projectページ固有のセクション
u-utilityヘルパークラス

以下のように@layery レイヤー名{～～} のように書けます。

// components/_c-button.scss
@layer component {
  .c-button {
    display: inline-flex;
    padding-block: 14px;
    background-color: #333;
    color: #fff;
  }
}

// utilities/_u-sr-only.scss
@layer utility {
  .u-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(100%);
  }
}

utilityは一番後ろに宣言したレイヤーなので、他のどのレイヤーにも勝ちます。「ここだけは絶対に効いてほしい」ヘルパークラスの置き場所として理想的。

ちなみに、@layerの外に置いたスタイルは、すべてのレイヤーより強いので注意です。

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧