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

毎回１つにまとまった同一名のCSSを各ページ読み込む方がキャッシュが効くので早いはずです。なので一個でいいんじゃないでしょうか？
CSSは単なるテキストファイルですので数千行合っても１００KBにもならないと思います。２００Kとか超えてくると少し考えものですが・・・

Comments

ほぼ重さがかわらないのであれば一つのほうが便利でいいですね。