概要

CSS を書いていると CSS ファイルが長くなってきて読みづらい状況になるのでこれを解消したい。
~注意!~
バックエンドから始めたエンジニアがおすすめする方法であり、セオリー通りかは分かりません！

解決方法

ファイルの全様

他の言語と同じように階層化する。
また、共通化できるものは共通化する。ひとつずつ以降で解説していく。

/static/css ┬ base.css
            ├ index ┬ main.css
            │       ├ area1.css
            │       └ area2.css
            ├ page2 ─ main.css
...

各ページごとの CSS

ページごとに読み込ませる CSS を変え、共通化させないようにします。
これによって CSS 変更時の他ページの影響を０にすることができるからです。

要素ごとにさらに分ける

要素が少ないページでは main.css だけで済むかもしれませんが、TOPページなど要素が多いところでは section 別に area1.css , area2.css のようにファイルを分けて1ファイル内のコード数を減らします（ファイル名は適切なものをつけた方が可読性が上がります）。

継承する

HTML テンプレートから呼び出す際に複数の CSS を１こずつ読み込むのは大変なので下記のように main.css だけを読み込めばよいようにしておきます。

/* /static/css/index/main.css */

@import url("./area1.css");
@import url("./area2.css");
...

全部のページに共通する設定

各ページごとの CSS を作っていて、全部のページで共通にしたいものがあると思います。
例えば

文字の大きさ
フォントの指定
全体で使用する色
メディアクエリで表示・非表示をする設定

などがあると思います。

共通化をするタイミング

各ページのファイルに書いていって、複数箇所で同じことを書いていると気づいたときに base.css へ移しましょう。

共通化による弊害

共通化することによって、 base.css は複数ページに影響を与えてしまうものになります。
ですので、複数ページにまたがる自作CSSは base.css だけにしましょう（膨れてきたらさらに種別ごとに分割するのはありです）。
また、変更を極力禁じるべきです。予期せぬデザイン崩れが発生します。

もし全体のデザインを変えたい時

この場合は全体で base.css の読み込みをやめ、各ページごとの CSS から作り直し、共通点を見つけ直すほうが良いと思われます。