新版: やばい臭いのするCSSコード(翻訳)

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Code Smells in CSS Revisited 公開日: 2017/02/08 著者: Harry Roberts 新版: やばい臭いのするCSSコード(翻訳) 今をさかのぼること2012年に、Code Smells in CSSというタイトルでCSSに潜むアンチパターンについての記事を公開しました。その後4年が経過し、記事の内容についての考えは今も変わっていませんが、さらに追加すべきリストが増えました。繰り返しますが、これらはあくまでコードから立ち上るやばい臭いという兆候であり、これがあるからといって必ずしも絶対的な悪手ではないことにご注意ください。ユースケースによっては全面的に容認できることもあるかもしれません。それでもやばい臭いが残ることに変わりはありませんが。 本題に入る前に、「コードの臭い(訳注: リンク先は日本語版です)」とは何かをおさらいしておきましょう。以下はWikipediaからの引用です(訳注: 強調は原著者)。 コードの臭い(または悪臭)とは、コンピュータプログラミングにおいてソースコードにより深刻な問題が潜んでいる可能性をうかがわせる何らかの兆候を指す。Martin Fowler曰く「コードの臭いとはシステム内のより深刻な問題につながりやすい表面的な兆候である」。 他の観点として、法則と品質に基づく方法がある。「臭いとは、基本的な設計法則に反し、設計の品質が損なわれていることを示す、コード内の特定の構造である」。 通常、コードの臭いそれ自体はバグではなく、技術的に誤っているわけでもなければ、現在のプログラムの機能を損なっているわけでもない。 むしろコードの臭いは、将来において開発速度を低下させたりバグや機能不全などのリスクを増加させる、設計上の弱点を指す。コードの悪臭は、技術的負債をもたらす要素の存在を示すことがある。 Robert C. Martinはコードの臭いのリストを、ソフトウェアの技能に役立つ「価値体系」と呼んでいる。 つまりコードの臭いは技術的に誤っているとは限らないものであり、単にリトマス試験紙として有用であるということです。 1. @extendを使っている 最初のトピックは期待どおりうまく短くまとめられました。筆者は@extendには副作用と落とし穴があると長年主張し続けてきましたが、今こそ@extendをコードの臭いリストに加えたいと思います。@extendは別に絶対悪ではありませんが、多くの場合悪手です。@extendは疑いの眼差しを持って取り扱いましょう。 @extendが引き起こす問題はさまざまですが、以下のようにまとめられます。 @extendの実際のパフォーマンスはmixinよりも落ちる: Gzip圧縮は同じコードが繰り返されていると圧縮がよく効くため、mixinなどで繰り返しが多い方が圧縮率は高まります。 @extendは強欲: Sassのextendがあるクラスを見つけると、そのすべてのインスタンスを@extendするため、アホみたいに長いセレクタチェーンが生成されます。 @extendはコードベースを引っかき回す: ソースの秩序はCSSの命であり、プロジェクトでセレクタがあっちこっちに動き回るような事態は常に避けるべきです。 @extendはコードの足跡をあいまいにする: @extendは、精密に解きほぐして追わなければならないSassの複雑さを覆い隠してしまいます。セレクタのクラスを複数使うアプローチなら、すべての情報をマークアップの中核に配置できます。 さらに詳しい英語記事 Mixinはパフォーマンス向上に効果あり @extendとmixinをどう使い分けるか Sassはクラスを暗黙で拡張する 2. クラス名を&で結合している Sassでもうひとつ言っておきたいのは、次のように&でクラス名の文字列を結合する手法についてです。 .foo { color: red; &-bar … Continue reading 新版: やばい臭いのするCSSコード(翻訳)