「5 つのなぜ」を使用して CSS_html/css_WEB-ITnose を記述します

私が入社してから 2 年も経たない今まで、ほとんどの人が CSS に関してつらい経験をしていると思いますが、CSS について最もよく言われるのは「調整が難しい」というものです。そこで私は、これに伴う問題、なぜ多くの人が CSS を書くのが難しいと感じるのか、他の人が CSS をよりエレガントに書けるようにする方法を調査してきました。コードレビュー中に、私は徐々に問題を発見しました。実際、多くの人は豊富な CSS 知識を習得していますが、属性をグループ化してクラスとして記述する方法を知りません。最終的には、クラスとしてスタイル設定する必要がある要素にランダムに名前を付け、このクラスに書き込むすべての属性をスローする必要がありました。優先順位が十分でない場合は、前のセレクターをすべて追加します。その結果、CSS コードは蓄積され続け、重複と冗長性が増加し続け、メンテナンスが困難になります。

問題は見つかったが、どうやって解決すればよいのか? プロジェクトチーム内で何度か共有し、コードレビューでも何度も質問を出しましたが、まだ効果はほとんどありません。何が正しいかを知るのは簡単でも、それを正しくする方法を知るのは難しい場合があります。最近まで、何冊かの本を読んだ後、CSS の設計をガイドするのに非常に適した方法を発見しました。それは、「なぜ 5 つ」または「質問 5 つ」方法です。 5 つの質問メソッドは、トヨタのリーン生産から生まれ、その後、リーン起業家精神から自然に派生したものであり、その目的は、多くの現象の背後に隠された本当の理由を深く発見することです。一見すると管理手法のように見えますが、実は問題の根本原因を見つけて解決するという考え方だと思います。そのため、さまざまな分野で利用されており、CSSが抱える課題にも当然適しています。

シナリオの例

まず例を見てみましょう。ある日、コードレビューで次のように書かれた CSS コードが見つかりました:

.max-width {    max-width: 300px;}

次の会話の結果 (まったくの架空の話):

UI 開発者: 「いいえ、次のように書く必要があります。」 . インライン スタイルを直接記述する場合の違いは何ですか? "

Dev: "最大幅を追加しないと、ページ上の要素の左側に余分な部分ができてしまいます。マージンを追加しますか?”

UI 開発者: 「よくわかりません。そのような問題に遭遇したことはありません。何か問題があるはずです。」このように書きます。しばらくすると、このコード行が何を意味するのかわかりませんが、変更する勇気はありません。「

UI 開発者:」 5 つの理由。問題の根本原因を見つけます。「

開発者: 「そうですね、CSS の問題は長い間私を悩ませてきました。解決できれば一番良いのですが。」 :「まず、なぜそれを与えなければならないのですか?要素の最大幅はどうですか?」

Dev:「追加しないと余分な部分ができるからです。」

UI 開発者: 「では、なぜこの要素に余分な部分があるのですか?」

開発者: 「最大幅が増えていないからです。冗談です。怒らないでください。実際にはわかりませんが、 DevTools で確認したところ、親要素の幅も間違っているようです。"

UI Dev: "近いです。なぜ親要素の幅が間違っているのですか? "

Dev: "親要素のパディングが両側で異なります。 "

UI Dev: "親要素のパディングが矛盾しているのはなぜですか? "

Dev?: "ああ、私が書いたことが分かりました。親要素の最後の疑似セレクター。padding-right を 0 に設定するために使用されます。親要素は最後の要素であるため、影響を受けます。心配しないでください。なぜ最後の要素の padding-right を 0 に設定する必要があるのですか? "

Dev: "元の最後の要素には変更できないコントロールが含まれているため、padding-right を設定する必要があります。 "

UI 開発者: "つまり、これが問題です。私たちの目的は、スペースのコンテナーに 0 を追加することです。要素を削除するには、「ウィジェットコンテナ」などと呼ばれるクラスを作成し、それをそのコンテナに配置し、最後の疑似セレクターを削除する必要があります。そうすればすべてが正常になります。元の問題は実際には問題ありません。

Dev: 「それで、素晴らしいです。スタイルの問題が必ずしもコードの問題ではないことがわかりました。5 つのなぜがとても役に立ちます。」 ”

このように「なぜ」を繰り返し問うことは、問題の根本を見つけるのに役立ちます。表面的な現象だけから問題を解決すると、逆の結果を招く可能性があります。さらに、この例の最後の疑似セレクターは、根本原因を見つけずにそのようなコード行を単純に記述したことによって発生しました。この例は、CSS に対する 5 つのなぜの利点も示しています。これにより、問題の根本原因が見つかるだけでなく、CSS を作成する際の意図がより明確になります。このようにして、padding-right が 0 であるべき要素がそのコントロールのコンテナであるため、「widget-container」のような名前を付けることが容易になります。 5 つの Why メソッド。本当の目的は、この時点でクラスの名前と配置する場所が明確であることです。

投資は比例して行う

しかし、私たちが直面するプロジェクトはそれほど親切ではない場合もあります。「なぜ」のレベルが増えるほど、CSS 間の関係はより複雑になります。そこで、5 つのなぜの原則について説明しましょう。比例して投資することです。主な考え方は、小さな問題には少ない投資が必要であり、大きな問題には大きな投資が必要になるということです。問題のレベルが高くなるほど、投資は大きくなります。 CSS では、スタイルの異常が見つかった場合、5 つのなぜを使用して発見された根本原因を繰り返すほど、問題はより深刻になり、解決策により多くの投資を行う必要があります。

上記の例に戻りますが、要素位置の異常の問題を通じて、根本原因は内側マージン 0 のコンテナ要素を必要とする制御にあることがわかりました。初めて発見したため、より小さなソリューションに投資するには、このコントロールにクラスを追加してパディングを削除します。現時点では非常に正しいように見えますが、さまざまな問題からこのコントロールの詳細を次々に見つけた場合、それは問題のレベルが上がったことを意味しており、単にこのクラスを呼び出している各コンテナに追加するべきではありません。コントロール。現時点では、すべてのコンテナーの内側のマージンを 0 に設定する、問題のレベルが増加し続ける場合は、ターゲットの外側のマージンを内部要素に追加するなど、他の方法を検討することもできます。また、コントロールを変更または置き換えることもできます。制御に適応するために他の部分を再構築します。つまり、問題のレベルに応じて問題を解決する手段を選択する必要があります。この利点は、元のリーンと同様に効率を自動的に調整できるだけでなく、問題が発生したときに対応する再構築ができることです。スタイルの要件がより明確になります。

CSS は記述的な性質を持っているため、非常に自由であるため、100 人の開発者によって同じ要件が 100 回実装されることがよくあります。初めて要件に遭遇する場合、最適な実装を作成することはさらに困難です。専用のクラスを作成し、必要な属性を追加することしかできません。実際、問題はここにあるのではなく、後で同じ問題が発生したときに元のコードを再構築できるかどうか、そして関連するすべての問題に基づいてより汎用的なクラスを作成できるかどうかです。経験豊富な UI 開発者は経験に基づいて判断し、そのようなクラスを直接作成することがあります。これは Bootstrap などのフレームワークの場合に当てはまりますが、経験のない開発者や経験の浅い開発者は疑問を抱くでしょう。 5 つのなぜの比例投資の原則は、CSS の開発を非常にうまく推進し、詳細な根本原因を使用して、さまざまな要素やさまざまなページで発生する問題を結びつけることができます。これにより、現在の問題レベルに応じてコードを整理することができます。安心して、次回までお待ちください 問題が発生してここで見つけた後、問題を解決するためにリファクタリングしました。

オリジナルリンク