レガシーなCSSを淘汰する

IEに恨みがある人のための記事です。

レガシーなCSSとは何か

• 大規模なのにプリプロセッサ、ポストプロセッサを使っていない
• float
• <!--[if lt IE 9]>
• IE対応
• positionで2カラムレイアウト
• 色が管理されていない
• 1ファイルがでかい
• 命名規則がない
• !important地獄
• レイアウトにpxが入っている

　どうやって淘汰するか

プリプロセッサ、ポストプロセッサ

• とりあえず導入する
• CSSファイルはそのままSCSSファイルに移動できるのでとりあえず移動する
• PostCSSは.cssのままなのでとりあえずautoprefixerだけ入れる

float

• flex使う
• 新しいbootstrapを使う

<!--[if lt IE 9]>

• IE11以前への対応をやめる
• 最新ブラウザへ誘導する
• IE11はautoprefixerで対応する

positionで2カラムレイアウト

• divをflexで重なる位置に置く => positionに入っている内容を移動する => positionを消す
• flexでレイアウトする

色が管理されていない

• SCSSなどで変数を使う
• こんな感じにする。$color-gray-e1: #e1e1e1;
• デザインの段階で色数を絞る

1ファイルがでかい

• とりあえず雑に分割する
• 分割しまくってあとで統合する

命名規則がない

• BEM使う

!important地獄

• 別ファイルを作って!importantが付いているものをひたすら入れる
• 出現順に依存している場合が多いので、上から順に移動する
• 登場するページを探す => 新規クラスを作って!importantを消す

レイアウトにpxが入っている

• %, vw, vhにする

まとめ

レガシーなCSSは見ているだけでストレスがたまるのでなんとかしたいですね。