container query

主な機能

container queryは、要素のstyleをその親コンテナのサイズに応じて適用させることができる
これにより、コンポーネント単位でデザインを行うことができる、また再利用性の向上やレイアウトとコンポーネントのstyleが完全切り離される
コンポーネントは基本的には全ての場所に配置が可能となり、容易にコンポーネントの配置箇所の変更が可能となる

具体的な使用例

具体例として上記画像のように、ページによってレイアウトが変わる使い方が可能
TOPでは3カラムに配置し640px未満のレイアウトを適用、下層ページでは640px以上のレイアウトが採用される

サンプルコード

<!-- top.html -->
<ul className="top">
  <li className="top__list">
    <div className="block">
      <img className="block__img" src="example.jpg" alt="Example Image">
      <h2 className="block__title">Example Heading</h2>
      <p className="block__text">Example text</p>
    </div>
  </li>
  <li className="top__list">
    <div className="block">
      <img className="block__img" src="example.jpg" alt="Example Image">
      <h2 className="block__title">Example Heading</h2>
      <p className="block__text">Example text</p>
    </div>
  </li>
  <li className="top__list">
    <div className="block">
      <img className="block__img" src="example.jpg" alt="Example Image">
      <h2 className="block__title">Example Heading</h2>
      <p className="block__text">Example text</p>
    </div>
  </li>
</ul>

<!-- kasou.html -->
<ul className="kasou">
  <li className="kasou__list">
    <div className="block">
      <img className="block__img" src="example.jpg" alt="Example Image">
      <h2 className="block__title">Example Heading</h2>
      <p className="block__text">Example text</p>
    </div>
  </li>
  <li className="kasou__list">
    <div className="block">
      <img className="block__img" src="example.jpg" alt="Example Image">
      <h2 className="block__title">Example Heading</h2>
      <p className="block__text">Example text</p>
    </div>
  </li>
</ul>

// ページ用scss

// top.scss
.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  &__list {
    flex: 0 0 33%;
    margin-bottom: 10px;
    container: layout / inline-size;

    @media (width < 640px) {
      flex-basis: 100%;
    }
  }
}

// kasou.scss
.kasou {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  &__list {
    flex: 0 0 100%;
    margin-bottom: 10px;
    container: layout / inline-size;
  }
}

// コンポーネント用scss

// block.scss
.block {
  border: 1px solid #ddd;
  padding: 10px;

  &__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #ccc;
    display: block;
  }

  @container (width < 640px) {
    display: flex;
    flex-direction: column;
  }
  @container (width >= 640px) {
    display: grid;
    grid-template:
      "image title"
      "image text" /
      1fr 2fr;
    grid-gap: 10px;
    &__img {
      grid-area: image;
    }
    &__title {
      grid-area: title;
    }
    &__text {
      grid-area: text;
    }
  }
}

各ページ用のscssファイルにレイアウトの記述を持たせ、コンポーネント用のscssと完全に分離させる一例
※ サンプルではtop.scssとkasou.scssの記述が似通っているので助長に見えるが、重要なのはblockコンポーネントを配置するエリアの幅を、場所によってどのように設定しても最適なレイアウトでblockコンポーネントが表示されるという点になる

感想

レイアウトのstyleとコンポーネントのstyleが影響し合わないようにCSSの記述を考えなければならない。CSSの設計に気を使う必要があるが完全にstyleを切り離せるのはメリットとなるだろう