CSSのファイル分けをどう考えるべきか

Question

記述量が少ないならstyle.cssなどで全て記述する？

記述量が多い場合、style.cssに加えて、HTML上にも記述する？

ページ別（index.css, terms.css, ... ）で記述する？

様々な考え方を目にしたことがありますが、
具体的にどのような基準でCSSのファイル分けをするべきでしょうか？

以下の例のように具体的な基準を持ってサイト設計をしたいと考えており、
ご存知の方がいればご教示いただけないでしょうか？

---

（例）

記述量〇〇行以上の場合
・実装方法１
・実装方法２

記述量〇〇行以下の場合
・実装方法3

---

Answer 1

CSSをどのように分けるかにおいては人によってかなり様々な気がします…。
私もいつも構成に困ったりしていますが次のようにしています。
これが正しいかどうか私も自問自答していますので、色んな人の回答をみたいですね。

まず、HTMLに直接記述することは避けます。
deo_deoさんも仰っていますが、後々のメンテナンスが大変になるからですね…。

ファイル名	内容
master.css	以下のCSSファイルをimportするファイル（HTMLで読み込むのはこれ）
default.css	Pタグとか見出しタグなどの余白や文字装飾などを初期化するファイル
header.css	サイトヘッダーの中身を制御するファイル
navi.css	グローバルナビ、ローカルナビなどを制御するファイル
contents.css	メインコンテンツ部分の制御をするファイル
footer.css	サイトフッターの中身を制御するファイル
layout.css	サイト全体のコンテンツのサイズや位置などは一貫してこのファイルで管理
common.css	全体を通して利用する汎用的なクラスを指定

今まで作成したサイトはCSSをこのように分けて作成していました。
ただ、記述量が少ない場合はここまで細かくしない場合もあります。

パーツごとにファイルを分けているイメージです。
下層ページが複雑化する場合は下層ページ用にCSSを分ける場合がありますがご参考までに。

私もSCSSをお勧めします！

Comments

[tom_k_92]

HTMLに直接記述することは皆さん避けているのですね。
大変勉強になります。

また、importするファイルを作ることは、静的ページではやってなかったので、大規模なホームページ制作の際は取り入れてみます！

SCSSは現場でもよく使われるんですね！
静的ホームページ → css
サーバーサイド言語を使用するアプリ開発 → scss

という使い分けなのでしょうか？

[phiar_poet]

私は職業上エンジニアという訳ではないので趣味レベルですが、
CSSと同じ様にSCSSは使えますので使い分けているわけではないです。

私の認識が正しいか分かりませんが、SCSSはCSSよりも簡潔にコードを書けるというか、
自分はSCSSの方が書きやすい感じですね…。
SCSSでは {} を使用したネスト構造でCSSを記述することができます。
例えば、

#main-contents

というIDを持った複数の要素に対してスタイルを適用する際、CSSですと…

#main-contents .detail1 { ... }
#main-contents .detail2 { ... }
#main-contents .detail3 { ... }

のように毎回 #main-contents を記述する必要がありますが、
これがSCSSですと次のように記述できます。

#main-contents {
　　.detail1 { ... }
　　.detail2 { ... }
　　.detail3 { ... }
}

編集するときも、後から見る時も、自分はとても見やすいので使ってます。
ちなみにSCSSでファイルを作成した後、コンパイルすることで
実際にHTML側で読み込ませるCSSファイルが生成されます。

deo_deoさんも仰っている開発の時にはSCSSでファイル分けして作成して、
それをコンパイルしてCSS化する際にコンパイラに1ファイル化させる感じです。
実際にHTML側で読み込むのはCSSであることに変わりはありません。

SCSSという我々が見やすい、管理しやすい形式でファイルを作っておいて、
それをコンパイラを通してHTML側で認識できるCSSに変換する…

そんな感じのイメージです。

ざっくり書かれていますがSCSSでこんな書き方ができるよ！
と紹介してくれているサイトがありますのでどうぞ。
正直めちゃくちゃ便利だと思います…。

https://qiita.com/pe-ta/items/24a4773edf0c2fa48aea

[tom_k_92]

ご丁寧に回答いただき誠にありがとうございます。
管理ファイルをSCSSにし、本番環境ではコンパイラを通したCSSを記述するという技があるとは知りませんでした。
勉強して、phiar_poetさんのようにマスターできるよう頑張ります！

Answer 2

CSSに限った話だと、僕の場合、一貫して共通css、ページ別cssで分けます。
コード量は関係ありません。理由は簡単です。
プログラミングというのは常に変化していくので、1つのファイルに全てを書いてしまうと後々メンテナンスが大変になるからです。
ならはじめからファイルの構成自体に意味を持たせてルール化してしまえば、後々見てもわかりやすいし、メンテナンスも容易だからです。
あと、CSSには読み込み順序や優先順位が決まっているので、大規模なサイトになればなるほどこれを意識しないといけません。
基本はCSSファイルでスタイリングして、オーバーライドしたい箇所を直接HTMLのstyle属性で指定するか!importantを使うとか。まぁあくまでstyle属性してや!importantは最終手段ですが。

あと、CSS以外で言えばSCSSを使うほうがいいです（業務ではデファクト・スタンダードです）。
SCSSを使えば、開発する時はファイルを分けて開発して、本稼働する際にはファイルを1つにしminify(圧縮)して表示速度を早くしたりできます。

Comments

[tom_k_92]

ご回答いただきありがとうございます。
メンテナンスの可能性を考慮したファイル構成、大変勉強になりました。

また、SCSSでminifyするという方法は知りませんでした。
やり方は勉強してみます！ありがとうございました！