FLOCSSについて教えてください。

Question

FLOCSSの件ですが、下記のようにファイルを分割してHTML各ファイルのlinkでこれらのCSSファイルをまとめたものを読み込むと思うのですが、
app.scss一つを普通のCSSを読み込むように読み込ませばよいのでしょうか？

下記を見るとapp.scssはすべてのSCSSファイルを読み込んでいますが、そうすると、そのページにはない要素のCSSも読み込むことになると思います。
それは無駄でレンダリングの速度が遅くなると思ったのですが、それよりリダイレクトの数を減らすほうがよほどレンダリングの速度を速めるので、
ほかのページのCSSを読み込むことは無視するのでしょうか？

それともapp.scssの例とは違いapp.scssをページごとに別々に作り、そのページにあるSCSSだけをインポートし、ページごとに違うapp.scssをlinkで読み込ませるのでしょうか？

・下記公式サイトの情報

もしSassやStylusのようなCSSプリプロセッサやビルドツールを使ってCSSファイルを結合できる環境にあれば、次のようにディレクトリを分割して管理することを推奨します。 次の例は、Sassを採用した場合の例です。

├── foundation
│ ├── _base.scss
│ └── _reset.scss
├── layout
│ ├── _footer.scss
│ ├── _header.scss
│ ├── _main.scss
│ └── _sidebar.scss
└── object
├── component
│ ├── _button.scss
│ ├── _dialog.scss
│ ├── _grid.scss
│ └── _media.scss
├── project
│ ├── _articles.scss
│ ├── _comments.scss
│ ├── _gallery.scss
│ └── _profile.scss
└── utility
├── _align.scss
├── _clearfix.scss
├── _margin.scss
├── _position.scss
├── _size.scss
└── _text.scss

モジュール単位でファイルを分割することによって、ページ単位またはプロジェクト単位でのモジュールの追加・削除の管理が容易になります。

・
これらを統括するためのapp.scssのようなファイルからは次のように参照します。

// ==========================================================================
// Foundation
// ==========================================================================

@import "foundation/_reset";
@import "foundation/_base";

// ==========================================================================
// Layout
// ==========================================================================

@import "layout/_footer";
@import "layout/_header";
@import "layout/_main";
@import "layout/_sidebar";

// ==========================================================================
// Object
// ==========================================================================

// -----------------------------------------------------------------
// Component
// -----------------------------------------------------------------

@import "object/component/_button";
@import "object/component/_dialog";
@import "object/component/_grid";
@import "object/component/_media";

// -----------------------------------------------------------------
// Project
// -----------------------------------------------------------------

@import "object/project/_articles";
@import "object/project/_comments";
@import "object/project/_gallery";
@import "object/project/_profile";

// -----------------------------------------------------------------
// Utility
// -----------------------------------------------------------------

@import "object/utility/_align";
@import "object/utility/_clearfix";
@import "object/utility/_margin";
@import "object/utility/_position";
@import "object/utility/_size";
@import "object/utility/_text";

Answer 1

下記を見るとapp.scssはすべてのSCSSファイルを読み込んでいますが、そうすると、そのページにはない要素のCSSも読み込むことになると思います。

それは無駄でレンダリングの速度が遅くなると思ったのですが、それよりリダイレクトの数を減らすほうがよほどレンダリングの速度を速めるので、
ほかのページのCSSを読み込むことは無視するのでしょうか？

私もそこはちょっと気になっていたところではあります。
が、各ページごとに1枚ずつ内容に最適化されたCSSを新たに読みなおすのと、
最初に全部入りのCSSを1枚読み込んで使い回すのでは、やはり後者のほうが早いのではないかと思います。
確かに初回読み込みは多少（ミリ秒単位で）遅くなるかもしれませんが、その後はキャッシュが効くはずなので。

※実際に実験したわけではないのでもしかしたら違うかもしれませんが、理論上はそうなるはず・・・です。

Comments

[退会済みユーザー]

なるほどそこまで深く考えているのですね。

つまり2の方が、初回のレンダリングの速度が早いということですね。
それでは他のページのCSSがゴミとしてあっても無視してよいということですね。
つまり<link rel="stylesheet" href="css/app.css">一つだけで昔のようにresetやcommon、そのページのCSSは読み込まなくてよくなるので、
そのほうがレンダリングの速度が早いということですね。
初回より遷移の速さを重視し、初回のレンダリングの速度より、毎度これは必要で、ひつようないと考えて、CSSを作り直すのは大変なので、
そんなことのないように、管理のしやすさを取ったということかもしれないですね。
ただ初回は大切なので、要望によって代えるのがベストでしょうね。

１．
他のページのCSSを外して最適化したappをページ数用意してそれぞれ別のappを各ページで読み込む。
<link rel="stylesheet" href="css/app（index）.css">

・inqueryのhtml
<link rel="stylesheet" href="css/app（inquery）.css">

2.
すべてのページのCSSを同じにして、同じ内容のappをhtmlで読み込む。（関係ないページのCSSが入っているが、トップのapp.cssを読み込んだ後は、
ほかのページに遷移する時、再度cssは読み込まなくてよい。）
<link rel="stylesheet" href="css/app（他のページと同じ）.css">

・inqueryのhtml
<link rel="stylesheet" href="css/app（他のページと同じ）.css">

私はとりあえずCSSの一つだけにして、関係ないページのCSSが入っていることが公式サイトの記載ミスではなく、
このやり方を推奨しているか確認したかったので、これで、胸を張ってapp.cssだけにすべてのcssをインポートして、
すべてのページのHTMLに下記のように記載することが、間違え出ないと確認できればそれでOKです。
<link rel="stylesheet" href="css/app（他のページと同じ）.css">

ありがとうございました。

[退会済みユーザー]

＞＞＞
つまり<link rel="stylesheet" href="css/app.css">一つだけで昔のようにresetやcommon、そのページのCSSは読み込まなくてよくなるので、
そのほうがレンダリングの速度が早いということですね。

文章に不備があったので訂正します。

つまり<link rel="stylesheet" href="css/app.css">一つだけ読み込ませ場OKで、昔のようにresetやcommon、そのページのCSSを複数読ますことは不要になったということですね。

その方が、無駄なCSSがあってもリダイレクトが減る分レンダリングの速度が早くなるということですね。