第4章 2節 ブログサービスのトップページを作るために準備したファイルのコードからポイントを読み取ろう

この節について

前の節で作成したコードを読み返しながら、新しいポイントについて学んでいきましょう。

前の節で作成したコードを読み返しながら新しいポイントについて学ぼう

概要

前の節で作成したコードを元に説明する新しいポイントとして以下のようなことが挙げられます。

  1. エントリーポイントをページごとに分けて必要なファイルだけをimportする

1. エントリーポイントをページごとに分けて必要なファイルだけをimportする

エントリーポイントとは、一番親となっているSCSSファイルのことです。

このとてもやさしいCSS設計チュートリアルのエントリーポイントは、これまでmodule-list.scssだけでしたが、新たにblog-service-top.scssを作成しました。

Webサイトの制作をするとき、サイト全体のページ数やモジュール数が少なくそれ以上増えないことが予めわかっているサイトの場合は、module-list.scssのようにワイルドカード( * )で全てのモジュールをimportして、全てのページでmodule-list.cssを共通して使用し続けていく運用方法でも問題はありませんが、このチュートリアルではサイトの運用に伴ってページ数やモジュールが増えていく場合を想定して、ページごとにcssファイルを分ける方法を選択し、以下のように必要なモジュールだけをimportします。

1
2
3
4
5
6
7
8
9
10
11
12
// base
@import "./base/global-variables/media-queries/media-queries.scss";
@import "./base/default.scss";

// modules
@import "./modules/mod-button-0001.scss";
@import "./modules/mod-container-0001.scss";
@import "./modules/mod-footer-0001.scss";
@import "./modules/mod-header-0001.scss";
@import "./modules/mod-heading-0001.scss";
@import "./modules/mod-media-0001.scss";
@import "./modules/mod-media-0002.scss";

特にサーバーサイドのプログラムによって動的に要素を出し分けているサイトでは、後からCSSファイルをページごとに分けていくのは大変なので、ページを新規に作成するときにSCSSのエントリーポイントも新規に作成することをとてもやさしいCSS設計チュートリアルでは推奨しています。

この節のおわりに

この節では、「エントリーポイントをページごとに分けて必要なファイルだけをimportする」ことについて新たに学習しました。

少し手間に感じるとは思いますが、後でCSSファイルを分割していくよりも最終的な手間としては少なく、ページの表示にかかる時間の面でも各ページ安定的に短く保てますので、ぜひ「エントリーポイントをページごとに分けて必要なファイルだけをimportする」方法を採用してみてください。

次の節では、bodyタグの中に設置する1つめのレイアウトのクラスを作成していきます。

続きはこちら

とてもやさしいCSS設計チュートリアルの目次へ戻る