Help us understand the problem. What is going on with this article?

死んだCSSを見つける方法

More than 1 year has passed since last update.

使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。
という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。
以下はFinding Dead CSSの日本語訳です。

Finding Dead CSS

私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。
今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。

数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。
そこには既に使われていないCSSがあるだけではなく、完全に使われていないコードがある可能性もあります。
廃止はされたもののコードが削除されることはなく、決して辿り着くことのできないコードの終着点。
ユーザがそこに到達することはおそらく不可能だが、未だ生存しているかもしれないWebページの袋小路。

そのようなデッドコードを抽出するにはどうすればよいでしょうか。
uncssのようなツールは強力ですが、今回の用途には向いていません。
今必要としているのは、RUMのようなソリューションです。
ユーザがWebサイトで実際に画面表示するコードを特定するにはどうすれば?

非常にシンプルで、費用対効果も高い解決策があることがわかりました。

サイトのリニューアルがあったとしましょう。
レガシーな予約システムを、数ヶ月から数年かけて段階的に移行しました。
少なくとも理論的には、全ての顧客とユーザは新しいサイトに移行したので、古いコードの除去は始められるはずです。

最初に行うことは、どこのコードが死んでいるかの仮説を立てることです。
もはやユーザが訪れることのないであろうCSSセレクタ( ここでは#checkout_wrapperとします )を選択します。

次に、1*1ピクセルの透明な画像を作ってdeadディレクトリに放り込みましょう。

最後に、選んだCSSセレクタの背景にその画像を設定します。

#checkout_wrapper {
  background-image: url('/assets/img/dead/checkout_wrapper.gif');
}

3ヶ月寝て待った後、サーバのアクセスログを確認しましょう。
画像へのアクセスログがなかったのであれば、誰もそのレガシーなコンポーネントをレンダリングすることはなかったということです。
安心して全てを削除しましょう。

アクセスログが発見されたのであれば、何らかの形でそのレガシーなはずのコンポーネントにアクセスが可能であることがわかります。
どれだけ依存されているかは、アクセス数によってわかるでしょう。

もちろん、このテクニックは完全にフェールセーフではありませんが、コードの削除がプロダクションアプリにどれくらいの影響を与えるかの試金石としては十分な機能を提供するでしょう。

自己紹介

ハイ、私はHarryです。
イギリスのフロントエンドアーキテクトアワードを取得しました。
主にCSSについて、書いたものツイートスピーチコードコンタクト

感想

スマートどころかすごい力業だった。
しかし彼のプロダクトや業績を見てみるとけっこうすごいかんじの人なので、先端技術を一周して行き着いた先がこの結果、ということなのかもしれません。

それにしても普通にググるとChrome開発者ツールばっかり出てきて困りますね。
それでわかるのは『そのページで使われてないCSS』であって『サイト全体で使われてないCSS』ではないのだ。
そんなやりかたでCSSを削除すると血を見るぞ。

rana_kualu
不労所得で生きたい。
https://twitter.com/rana_kualu
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした