死んだCSSを見つける方法 - Qiita

使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの日本語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。 今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。 数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。 そこには既に使われていないCSSがあるだけではなく

[paradisemaker]

戸田奈津子訳を謳うなら「〜かもだ」「〜せにゃ」をちゃんと入れてほしい

[wumf0701]

3ヶ月寝かしたら確実に忘れてしまってあとはクソコードの死体が横たわるのみよ。

[perl-o-pal]

無数にある対象から「いらなさそう」って思えるのを絞り込むのが面倒なんだが…

[umai_bow]

普通に便利だ。クローラとか言ってる奴はフロントエンドの闇を分かっていない

[manaten]

既にbackground-imageが指定されているセレクタでも、background-image は複数指定できるゾ https://developer.mozilla.org/ja/docs/Web/CSS/background-image

[kuracom]

これは凄い… / 既存のbackground-image上書きししそうなら既存画像で計測すれば良いし、または::beforeや::afterを追加してみるとか

[dala]

「先端技術を一周して行き着いた先がこの結果」というのは納得。たしかどこかの会社のブログで、使わなくなったメソッドを見つけるのも同様に同じ力技だった気がする。ロジカルに見つけても100%信頼はできない。

[uturi]

力技だけど、こういうのは現場だと役立ちそう。ただ、『使われてなさそう』と『使われていない』は大きな差があるので、それを調査するのが大変だろうけど。

[midnight-railgun]

既にbackground-imageが設定されてるセレクタだったらどうするの？

[twatw]

片っ端からUUIDをファイル名にした画像読み込ませて一度アクセスすれば主要な利用中のものは特定出来るから残りから不要なものをじっくり消していけばいいのでは

[naglfar]

なるほどなー。ただ、使ってなさそうな要素をピックアップするより、全部のセレクタにユニークな透明画像を仕込みたい。どの画像がアクセスされてないかで判断。

[nagayama]

おもしろい

[k_gobo]

力技、嫌いじゃない。

[deep_one]

「3ヶ月寝て待った後、サーバのアクセスログを確認しましょう」それで決断する度胸は私にはないな。↓そうか、全リンクがクロールされているという確信があれば確かに決断できるな。

[june29]

なるほどねぇ、閲覧者に明示せずに背景画像を仕込むテクニック (戸田奈津子訳ずるい)

[fut573]

勉強熱心なエンジニアの卵が開発ツールで（ｒｙ

[tsuki-rs]

3ヶ月寝かしたらソイツも死んでそう。

[zu2]

なるほど

[diveintounlimit]

戸田奈津子とか名前出ちゃうと条件反射で回れ右したくなるな(´・ω・｀)

[raimon49]

ビーコンちっくなパワープレイだ。

[shimooka]

想像以上にパワープレーだけど『先端技術を一周して行き着いた先がこの結果』は全然ありだなー。適材適所。

[sds-page]

[google:簡易はてな記法使ってたんですけど？]http://b.hatena.ne.jp/help/entry/textformat

[public_key]

css解析してbackground-imageの画像を全部取得するスクリプトでいたずらしたくなってしまう（やらない）

[otchy210]

Chrome devtools の不使用 CSS の結果って、API で取れたりしないのかな？取れるならその結果をサーバに送り込んで溜めておけば、3 ヶ月後、一度も使われなかったセレクタのリストが得られる。

[persee]

めっちゃアナログだった、、

[solidstatesociety]

CSSマイニングｗ

[shifumin]

こういう力技好き。

[hrfmmymt]

アクセスログの心電計利用

[razokulover]

力技すぎてわろた

[side_tana]

天才っぽい

[amagitakayosi]

頭いい

[yetch]

最近似たような出血したので参考にしたい

[mami-hate]

アクセスログとは地道だけど確実性があるなぁ。

[su_zu_ki_1010]

はてぶコメントを見ると、どうせしばらく経つと忘れるよHAHAHAHAHA!なコメントばかり。忘れないようにタスク管理というものがあるのでは。/背景を仕込むというやり方は力技に見えるけど一周回ってたどり着いたんだろうな

[wdr_s]

この方法、確実性が微妙ではある。

[algotaker]

お

[homarara]

id:midnight-railgun 私なら、設定されてる画像をコピーした別名ファイルを作り、そっちを指定する。