ある機能を追加しようとした時、いくつかある手法から選択する条件として、シンプルであることや簡単であることをが重要視されることは多い。けど、それと同じくらい今だけでなくこれからの機能との兼ね合いも考慮するべきで、シンプルで簡単という作業上のメリットのみで選択してしまうのは良くない。フロントエンドの人なのでclearfixを例にして書く。
マークアップの追加によるものを論外とすると、clearfixの実装としては主に以下の4つが挙げられると思う。
content: "."を使ったものoverflow: hiddenを指定するだけのものシンプルであることや簡単であることのみを考えるのなら、間違いなくoverflow: hiddenを指定するだけのものを選択することになると思う。
なんといっても1行で済むことと、擬似要素が不要なことは魅力的。またclearfixを適用したい要素そのものに対して指定すれば良いという点も簡単でわかりやすい。その手軽さから採用されることが増えているような感じもする。一部フレームワークではほとんどベスト・プラクティス扱いだったり。
今とこれからの機能との兼ね合いという点ではoverflow: hiddenによる手法にはかなりの難点がある。この手法が脚光を浴びた頃には使われていなかったbox-shadowプロパティーや、ネガティブ・マージンによる飛び出した配置、transformプロパティーによるはみ出しなど、競合するものは多い。こういった影響の大きさを考えるとちょっと使いづらい。
競合とは少し違うが、マージンの相殺というCSSの(厄介だが)特徴的な機能を無効化してしまうMicro clearfixも、CSSの振る舞いに大きな変更を加えてしまうという点が気になる。知っててあえて使うのなら構わないという気もするけど、* { box-sizing: border-box }と似た危うさを抱えている気がする。
つまり、実現できること以外になにがしかが起き、それが未知数だったり、CSSとしては当たり前の挙動を崩しかねないものだったりするわけ。
最終手段や何かとしてoverflow: hiddenを使った手法を覚えておくと助かることもある。違う用途で擬似要素を既に利用していて他の手法が使えない時なんかはまさにそう。また、他の理由でoverflow: hiddenを使っている要素になら改めてclearfixを使わなくても良いことがわかるので、CSSを少しスッキリさせることもできることになる。なんかの時には思い出してやると良いかも。
つまりfloatプロパティーをclearする以外の機能を持っているのが問題ということになる。これからの機能に対して正確に予知することは出来ないわけだし、なるべく影響がないようにやりたいことだけを実装する方が安全で望ましいんじゃないかな、と。
ハックを使わないとか、jQueryに対するPolyfill、CSS Resetに対するNormalize.css、といったこれからのウェブを意識した思想と通じる考え方だと思う。
シンプルなことや簡単なことは、覚えやすさや導入の容易さという面でメリットは大きい。と同時に全容を把握したつもりにもなりやすく、それが万能で最高だと勘違いもしやすい。その機能は本当に必要なのか、その手法は実装したい機能だけを実現するものなのか、他の人はしっかり理解できるのか、デメリットをちゃんと説明できるのか。ある機能を実装する手法を選択するまでにもっといろいろ考えておくと後に苦しまなくて済むし、他人を苦しめなくて済むはず。