*この記事にはアフィリエイトリンクが含まれてます。
30万文字のCSSを9万→4万5千→1万7千→1万4500へ圧縮。記事依存スタイルをやめ、common設計へ移行した再構築の全工程をまとめました。
1. なぜこの記事を書いたのか
この2日間、俺はずっとCSSと殴り合っていた。
「なんか最近、デザイン触るたびに重くね？」
「修正するたびにどっか崩れね？」
そんな違和感から始まった。
最初に最新15記事のCSSを全部集めたら30万文字だった。
30万文字。もはや小説である。
いや笑うだろ。
CSSだぞ？物語じゃねぇぞ？
でもな、ここで逃げたら一生記事依存CSSの沼から抜け出せん。 だからやった。
2. どうして30万文字になったのか
原因はシンプル。
- 記事ごとに微妙に違う装飾を追加
- 似たボックスを毎回新規作成
- コピペしてちょっとだけ改変
- 使わなくなったCSSは放置
これを繰り返した結果、記事依存CSSの集合体が誕生した。
積み重ねって怖いな？
気づいたら30万だ。
3. 第1段階：重複削除で 30万→9万
まずは力技だ。
全CSSをまとめて重複削除。
結果。
- 30万 → 9万
この時点でだいぶ軽くなった。
でもまだ9万。
まだ太ってる。
4. 第2段階：方針①（A＋C）でUIを決めた
ここで腹を括った。
- A：共通UIは全部commonへ
- C：記事専用装飾は原則作らない
つまり「土台を固定する」戦略だ。
buybox、cta-soft、free-links、oshi-card、push-area、box8。
この辺を“共通UI”として定義。
装飾で迷う時間を消す。
ここで方向性が決まった。
5. 第3段階：HTMLから未使用CSSを可視化
次は削る作業。
HTMLから実際に使われているclassだけを抽出して、未使用CSSを洗い出した。
import re
with open("html.txt", "r", encoding="utf-8") as f:
html = f.read()
classes = set(re.findall(r'class="([^"]+)"', html))
used = set()
for group in classes:
for c in group.split():
used.add(c)
print(len(used))そこからmaster.cssをsplit。
- 9万 → 4万5千（split）
- 4万5千 → 1万7千（dedupe）
そしてログに出た。
Removed duplicates: 262
262回、俺は同じことをしていたらしい。
笑うしかない。
6. 第4段階：common/archive分離
ここで整理。
- common.css（共通UIのみ）
- archive.css（過去記事保険）
過去を切り捨てる勇気はない。
でも未来の足は引っ張らせない。
7. 第5段階：common内の重複削除
最後は手作業。
common.css内で似た定義を目視で潰していく。
- 1万7千 → 1万4500
ここで止まった。
削りすぎると崩れる。
でももう“太ってる感じ”はない。
8. 最終結果
- 30万 → 9万 → 4万5千 → 1万7千 → 1万4500
CSSは30万文字から1万4500文字になった。
2日間の殴り合いの末、勝ったのは俺だった。
いや正確には“共通設計”が勝った。
9. 今のcommon.css構成
- 目次（.l_toc）
- 強調ボックス（.box8）
- buybox
- cta-soft
- free-links
- push-area
- oshi-card
- ブログカード
- 内部リンクボックス
共通UIだけ。
記事依存なし。
土台が固まった感覚がある。
10. 今後の運用ルール
- 記事ごとに新しい装飾は原則作らない
- 必要ならcommonに追加
- 3回使わないなら作らない
- 増えたらその場で整理
取っ散らかる前に止める。
これが今回の最大の学びだ。
11. ここで宣言しておく
たぶんこれかも俺はCSSを無駄に作っては似た状況に陥ることだろう。
でも、それは今までみたいに取っ散らかってほったらかしにするんじゃなくて、数個作った時点で必要なのか考えてそのたびに破棄して初心に帰るだろう。
同じミスはするだろうけど、カバーの仕方は分かったから何とかなるだろうよ！
