.clearfixという古(いにしえ)の魔法

初級のウェブ制作者には、.clearfixというclassを魔法だと思っている人が多いようだ。

どういうわけか、floatの解除＝親要素に.clearfixと刷り込まれているようである。

しかし親要素にいちいち.clearfixを付けるコーディングなど数年前に死滅している。

そんな古のclearfix使いにまつわるお話。

例えば、横並びのリストの場合、普通はこうなるはずだ。

ul.image-list>(li>a>img)*3

そしてSCSSでこう書くはずだ。

.image-list {
    @extend .cf;
}
.cf {
    *zoom: 1;
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

しかし、.clearfixを魔法だと思い込んでいる術者はこうコーディングしてしまうらしい。

ul.image-list.clearfix>(li>a>img)*3

clearさせたいがために、HTMLに手を加えてしまっている。CSSの可読性が落ち、HTMLのメンテナンス性も大きく下がる。

確かに、SCSSが無かった昔はCSSで完結させるよりも、要素に.clearfixを付けた方がコーダー的には楽だった。それでも上級の製作者はCSSで完結させていたはずだ。

そんな古のclearfix使いが未だに存在している。

とあるリニューアル案件があった。

数人がかりでWordpressに大量の過去記事の流し込み作業を行っていたとき、それは起こった。

新人ディレクターが指示を出し、全員に定型の要素とclassを使うように徹底していて関心したのだが、横並びのimgの外包divでclearを行うことを忘れていた。

そのため直後のテキストが回りこんだり、レスポンシブ表示時に崩れたりしていた。

横目で見てみると、幸い外包divにimage-boxという良いclassがついていたので、

.image-box:after{clear～}って書くだけだね！

なんて思って見ていたのだが、どうもやり取りがおかしかった。

ディレクター「ここはfloatしてるので、clearfixしないとダメです」
新人コーダー「はい」
ディレクター「clearfix分かりますか？」
新人コーダー「はい」
ディレクター「じゃあこのdivにclearfixつけてください」
俺「（えっ！？）」
新人コーダー「わかりました」
ディレクター「過去の分も全部お願いします」
俺「ちょっと待ったぁぁぁぁ！！！！！」

嫌な予感は的中した。
このディレクターは100以上の記事のdiv.image-box全てに、.clearfixを付けろと言ったのだ。

ここにもいたか、古のclearfix使いが・・・。

幸い、直前で気付いたため大量の戻り作業が行われることなく解決した。

後々ソースを見てみると、大体こんなかんじでコーディングされていた。

よくあるお知らせの一覧表示の例だが、

div.infomation.clearfix>dl>(dt+dd)

divがなんか多いうえに、場違いな.clearfixが癇に障る。
こうでいいじゃん。

dl.infomation>(dt+dd)

こうしてまた一人、古のclearfix使いが姿を消したのであった。