settingsログイン
メニュー

【解決済み】FLOCSSについて教えてください。

閲覧 495
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";
nobunaga 2016 6/30 質問 HTML・CSS

回答 1

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

MONO Ledge 東京都 北区 ホームページ制作

全ての回答 ホームページへ
2016 7/1 回答
ほぼ重さがかわらないのであれば一つのほうが便利でいいですね。

ウェブサイト構築、HTML・CSS の企業/事業者/教室/プロの方のホームページの集客、アクセスアップ、SEO対策効果が期待できるリスティングサイト=Ask-itをぜひご活用ください

Ask IT にようこそ。ここではコミュニティメンバーに質問したり、回答を得ることができます。
ITについて質問したい方へ ITについてプロに質問したい方は会員登録後すぐに質問をする事ができます。

プロフェッショナルの方へ 質問に答えていただけるプロフェッショナルの方は下記をご覧下さい

お気づきの点があれば是非お知らせください
...