CSSの新機能にどのように向き合えばよいか、新しいことを学んだり覚えることは頭の固い人には難しい

サイト構築 -CSS

Post on:2024年6月6日

はじめに

ここ数年で、多くのCSSの新機能がリリースされました。

どれも便利な機能ですが、実際の使用率はまだ低いです。低いのにはさまざまな理由がありますが、最大となる理由の一つはわたし達自身の頭が固いことにあると思います。

新機能による疲れ

現在、わたし達はまさに「renai-css-ance」（CSSルネサンス）の真っ只中にいます。CSSを書くには最適な時期ですが、すべての新機能に追いついていくのは大変だと感じることもあります。

カンファレンスやSNS上で著名な人々が新機能についてポストしていますが、実際にそれらが使用されるのは少し遅れているようです。

ここで、簡単な質問です。
下記の中で、あなたが実際のプロジェクトで積極的に使用したものはいくつありますか？

コンテナクエリ
コンテナクエリの解説記事
スタイルクエリ
スタイルクエリの解説記事
CSSの@layer
@layerの解説記事
subgrid
subgridの解説記事
CSSのネスト
CSSのネストの解説記事
:has, :is, :where
:has()疑似クラスの解説記事
 :is()と:where()の解説記事
ダイアログ、ポップオーバー
popoverの解説記事
論理プロパティ
CSSの論理プロパティの解説記事
Scroll-driven Animations
Scroll-driven Animationsの解説記事
View Transitions
View Transitions APIの解説記事

これらの新機能はどれも非常に便利で、サポートも全体的にかなり良い状態です。しかし、実際に使用されるのは遅れています。

もちろん、比較的新しいものもあれば、ニッチなものもあります。しかし、たとえばコンテナクエリで考えてみましょう。この機能は長い間フロントエンドのデベロッパーから要望の多かった機能です。それなのに、なぜ使用されないのでしょうか？

私自身の経験からすると、さまざまな要因が関係していると思われます。

サポートを言い訳にする

[機能X]は使用できません。[古いブラウザ]をサポートする必要があります。

これは、昔からある言い伝えです。
ブラウザのサポートは、新しいものに対する簡単な反論であり、機能を学習しないための便利な言い訳になる場合もあります。しかし、その機能がサイトの使い勝手にそれほど影響を与えないオプション程度であれば、実際の「機能拡張」に対しておこなうのは簡単です。

一部の新機能は、これをするのに適切な方法がありません。たとえば、CSSの@layerやネストはオプションとして使用できるものではなく、オールオアナッシングです。すべてのブラウザをサポートするには、別のスタイルシートが必要になります。

また、コンテナクエリのサポートはすべてのモダンブラウザでグリーンになっていますが、非サポートブラウザではレイアウトなどサイトの基本的なものを壊してしまう可能性があるため、デベロッパーは使用することに消極的になっています。

目に見えない改善

今までの方法で問題がないのに、なぜ[機能X]を使用するのですか？

皆さんの中には、CSS3の機能が初めて登場した頃のことを覚えている人もいるでしょう。

当時は、border-radiusやbox-shadowを使用するのはとても困難でした。ほとんどは背景画像やハックで実装しており、変更にはかなりの労力が必要でした。

角丸のデザインが、CSS1行で実現できるようになったのです。昔はPhotoshopを立ち上げて9分割画像を作成していましたが、今はborder-radius: 8px;と書くだけで実装できます。ブラウザのサポートが十分になると、昔の方法は誰も使用しなくなりました。

しかし、今日の新機能の大部分は「目に見えない」ものであり、コードの構成やアーキテクチャに重点が置かれています。

@layerやコンテナクエリなどは、ブラウザ上で実際に見ることができるものではなく、それらの新機能が解決する問題は一見するとそれほど面倒なことではないかもしれません。もちろん、それらの新機能は大きな利点を提供しますが、それらを使用しなくてもなんとかなります。デベロッパーにとっては急いで乗り換える必要がないというのが、採用が遅れる理由だと思います。

実際の使用例とデザイントレンド

[機能X]をプロジェクトのどこで使用すればよいのか分かりません。

コンテナクエリの最初の使用例として私がよく聞くのは、「メインカラムやサイドバーに配置できる要素のスタイル設定」です。これは当時非常に一般的だったWordPressブログのデザインに由来するもので、サイト内のさまざまな幅のセクションに自由に配置できるウィジェットがありました。

現在ではウィジェットやサイドバーはそれほど一般的ではなくなりました。デザインのトレンドは進化しています。もちろん、コンテナクエリの使用例は他にもたくさんあり、現在の典型的な使用例はカードコンポーネントがあります。人々はしばらくの間、他の用途を見つけるのに苦労しているようです。

より大きな問題（最近ではMasonryグリッド）は、CSS機能の必要性が特定のデザイントレンドから生まれることがあるということです。しかし、スタンダードな動きはトレンドよりもゆっくり変化するため、新機能が実際にリリースされる時には必要性がそれほど強くない可能性があります。

仕様の作成者は、プラットフォームの長期的なメリットを評価するのに非常に良い仕事をしていますが、将来を予測することはできません。個人的には、新機能が特定のデザインに縛られることはないと思います。しかし、デベロッパーのコミュニティが新機能に関心を持つようにするには、具体的で現実的な使用例を示すことが重要だと思います。

習慣を断ち切る

技術的な理由がどうであれ、すべてにおいて最大の要因は自身の習慣だと思います。

わたし達は、問題を解決するときにパターンに依存します。うまくいく方法を見つけると、次に同じような問題に遭遇したときに、すぐにそのパターンを使用します。

CSSの構文を覚えるのはそれほど難しくはありませんが、新しい方法で考えるように脳を再構築するのは非常に困難です。新しい方法を学ぶ必要があるだけでなく、古い方法を忘れる必要もあります。

これを克服するにはどうすればよいでしょうか。CSSに対して持っているメンタルモデルを変えるには、あるいは新しい方向に向かわせるためには、どうトレーニングすればよいのでしょうか。

確立されたパターンの再考

より広範な新しいアーキテクチャ機能のいくつかを採用したい場合は、再利用可能なパターンの観点から考える方法を見つける必要があります。

たとえば、BEMが依然として人気を保っている理由の1つは、CSSにアプローチする普遍的なパターンを提供しているからです。一般的なSassの設定では、任意のコンポーネントは次のようになります。

// _component.scss
.component {
    // block styles
    position: relative;

    // element styles
    &__child {
        font-size: 1.5rem;
    }

    // modifier styles
    &--primary {
        color: hotpink;
    }

    // media queries
    @include mq(large) {
        width: 50%;
    }
}

// _component.scss

.component {

// block styles

position: relative;

// element styles

&__child {

font-size: 1.5rem;

}

// modifier styles

&--primary {

color: hotpink;

}

// media queries

@include mq(large) {

width: 50%;

}

BEMは、カスケードを回避するために誕生しました。現在ではより優れた@scopeやスタイルのカプセル化がありますが、CSSを頭の中で構造化する方法としてだけでも役立ちます。

新しいアーキテクチャのアプローチを学ぶのは、ゼロから始めるよりも既存のパターンを取り入れて進化させるほうが簡単だと思います。車輪を再発明する必要はなく、新しいタイヤに履き替えるだけです。

BEMに似ていると感じつつも、新しい利点をいくつか散りばめた例を見てみましょう。

/* component.css */

/* Layer Scope */
@layer components.ui {
    /* Base Class */
    .component {
        /* Internal Properties */
        --component-min-height: 100lvh;
        --component-bg-color: #fff;

        /* Block Styles */
        display: grid;
        padding-block: 1rem;
        min-block-size: var(--component-min-height);
        background-color: var(--component-bg-color);

        /* Child Elements, Native CSS Nesting */
        & :is(h2, h3, h4) {
            margin-block-end: 1em;
        }

        /* States */
        &:focus-visible {
            scroll-snap-align: start;
        }

        &:has(figure) {
            gap: 1rem;
        }

        /* Style Queries as Modifiers */
        @container style(--type: primary) {
            font-size: 1.5rem;
        }

        /* Container Queries for component layout */
        @container (min-inline-size: 1000px) {
            --component-min-height: 50vh;
            grid-template-columns: 1fr 1fr;
        }

        /* Media Queries for user preferences */
        @media (prefers-color-scheme: dark) {
            --component-bg-color: var(--color-darkblue);
        }

        @media (prefers-reduced-motion: no-preference) {
            ::view-transition-old(component) {
                animation: fade-out 0.25s linear;
            }
            ::view-transition-new(component) {
                animation: fade-in 0.25s linear;
            }
        }
    }
}

/* component.css */

/* Layer Scope */

@layer components.ui {

/* Base Class */

.component {

/* Internal Properties */

--component-min-height: 100lvh;

--component-bg-color: #fff;

/* Block Styles */

display: grid;

padding-block: 1rem;

min-block-size: var(--component-min-height);

background-color: var(--component-bg-color);

/* Child Elements, Native CSS Nesting */

& :is(h2, h3, h4) {

margin-block-end: 1em;

}

/* States */

&:focus-visible {

scroll-snap-align: start;

}

&:has(figure) {

gap: 1rem;

}

/* Style Queries as Modifiers */

@container style(--type: primary) {

font-size: 1.5rem;

}

/* Container Queries for component layout */

@container (min-inline-size: 1000px) {

--component-min-height: 50vh;

grid-template-columns: 1fr 1fr;

}

/* Media Queries for user preferences */

@media (prefers-color-scheme: dark) {

--component-bg-color: var(--color-darkblue);

}

@media (prefers-reduced-motion: no-preference) {

::view-transition-old(component) {

animation: fade-out 0.25s linear;

}

::view-transition-new(component) {

animation: fade-in 0.25s linear;

}

このような新機能を学ぶのに私が好む方法は、サイドプロジェクトや個人サイトという安全な遊び場で試してみることです。試行錯誤を繰り返すうちに、しっくりくるパターンが浮かび上がってくるかもしれません。そして、多くの人がそのパターンに同意すれば、より一般的な慣習になる可能性もあります。

一歩ずつ前進する

新しいことを学ぶときには、圧倒されないことが重要です。達成可能なゴールを設定し、コードベース全体を一度にリファクタリングしようとしないでください。

新機能のいくつかは、これまでの慣習を壊すことなく、水面下でテストするのに適しています。

プログレッシブエンハンスメントとしてビュー遷移を実装してみたり、コンテナクエリで内部スペースを調整する小さなコンポーネントを構築したりできます。

ブラウザのサポートが100％である必要はありません。今日からプロジェクトで論理プロパティを使い始め、postcss-logicalなどで物理プロパティに変換することもできます。

どのような選択をするとしても、新しいものを試すための十分なスペースを確保するようにしてください。細部にこそ悪魔は潜んでいるもので、新しいCSSをコピペで使用しても最良の洞察は得られません。まずは、実際に試してみることです！

インスピレーションを見つける

私がもっと見たいのは、優れた新機能を使用した完全なサイトのベストプラクティスです。これらの新しいテクニックが実際のプロジェクトでどのように使用されているのか、全体像を把握するのに役立ちます。理想的なリソースは、才能ある個人サイトが多いです。OddBirdやAdam ArgyleやMayankがお勧めです。