私のソリューションは言うまでもなく、有料テンプレートでも（残念ながら）発生するいくつかの問題についてお話したいと思います。 以下のテキストは、ユニークであると主張するものではなく、経験豊富な開発者にとって興味深いものではありませんが、初心者のフロントエンド開発者、レイアウトデザイナー、および幅広いWeb開発者にとって有用です。 まだ興味があるなら、ようこそ！
私たちは歴史的に...
原則として、サイトが長い間開発されている場合、その外観の要件は定期的に変更されます。 これに加えて、プログラマーが定期的に変更すると、コード（この場合はcss）が混乱に変わります。 ブートストラップクラス、時にはテンプレートクラスのどこかで、これらすべては数世代のレイアウトデザイナーの松葉杖で薄められ、インラインスタイルで味付けされます。 何かを変更したり、新しいものを追加しようとすると、「このhtmlブロックに配置する必要があるクラスを推測します」という長い魔法のゲームにつながります。 すべてを捨てて、ゼロから書き直したい。 しかし、ここでは、実際、フォームに新しいフィールドをすばやく追加することを検討しました。バックエンドで十分なタスクがあります。実際、最初の例でこの記事を書くきっかけとなった理由を考えます。
入力サイズ
したがって、フォーム要素の標準ビューがあります。これを少し変更します。たとえば、高さを減らします。 入力をUIクジラに対応させるためにこれを行う方法は何ですか？
インラインスタイルを挿入できます！ それはとても楽しいだろう-それから、すべての入力にこのすべてのフットクロスをコピーしてください！
誰かが笑いますが、私はそのような決定を定期的に見ます。 幸いなことに、この場合はそうではありませんが、そうです。 これを行うとどうなりますか？ 長いスタイルの説明を各入力にコピーし、テンプレートを膨らませて読みにくくする必要があります。
独自のクラスを作成して、必要な高さ設定を記述し、同時にフォントサイズを変更しましょう。
はい 彼です。 「H40_px-16」。 クラスの名前から、それが何をするのかすぐにわかりますか？ 新しい入力がなぜ必要以上に厚いのかを理解しようとしたときに、このようなものに出会いました。 同じテンプレートのコードを見て、見つけました。 この場合、どのような結果が私たちを待っていますか？ 原則として、重要なことは何もありません。 フォーム要素の各クラスでは、「form-control」に加えて、「h40_px-16」を追加します。 覚えておく必要がある、または文書化する。 また、フォームのすべての要素を緑色の背景で行う必要がある場合はどうなりますか？ 別のクラス「b_g」を追加するだけです。 そしてもう一つ...
フォーム要素の既存のクラスを拡張しますか？
表面上にあるように思えますが、このソリューションを見るのは非常にまれです。 そして私の意見では-最も正しい。 これにより、要素で指定する必要のあるクラスの数を節約できますが、最も重要なことは、このコードを使用しようとしている開発者の混乱を軽減することです。 必要な変更がこのタイプのすべての要素に影響する場合、「フォームコントロール」の独自のルールセットを追加するだけで、すべての入力の高さ、フォント、背景などが変更されます。
カスタムソリューション
UIキットに従って、これまでにない革新的なソリューションを追加する必要があります！ そして、それはゼロから書かれています。 ほんと？ いいえ、pureCSS（良いが最小限のフレームワーク）を使用し、それに含まれていないものを実装する必要がある場合、これを許可できます。 ただし、ブートストラップを使用する場合は、非常に高い確率で、ドキュメントを読み直すだけです。
サイトにバッジの独自の実装がある非常に軽視されている状況を見てみましょう。 ブートストラップが接続されている。 そのため、これらのバッジの作成に参加しなかった開発者の1人は、サイトのどこかにそれらを追加する必要がありました。
- まず、ブートストラップのドキュメントを見て、そこからソリューションをコピーします。
- これはUIクジラに視覚的に対応していないことを見て、使用されている革新的なソリューションに関するドキュメントを探しています。
- このドキュメントがそうでない場合（そして、そうでない可能性が高い）、彼はコード内でこれがどのように実装されているかの例を検索します。
- 希望するbeijikクラスをコピーすると、バッジは正しいが、青であり、赤が必要であることがわかります。
- UIキットのクラスを記述するcssファイルを見つけて、赤色が配置されていないことを検出し、ため息をつくとクラス「beijik-red」が追加されます。
次に、これをバッジクラスが独自のバッジ実装用に再定義され、ドキュメントで色の実装が説明されている状況と比較します。
- まず、ブートストラップのドキュメントを見て、そこからソリューションをコピーします。
- ドキュメントは赤を追加する方法を見つけます：バッジ赤
ここでは、既成のソリューションを変更するだけでなく、すぐに使用できる機能に慣れていないため、拡張する必要がある例を検討しました（bootstrap3のバッジにはカスタム色がありません）。 この場合、やはり同じように、既存のクラスをオーバーライドするのが最善の解決策であり、その後のみ-独自のクラスを追加します。
もちろん、私が与えた例はかなり洗練されていますが、最初にブートストラップのドキュメントで解決策を探し、次にそのサイトで使用されているテンプレートのドキュメントで（残念なことに、ドキュメントがありました）、cssファイルを探しましたそして、標準の振る舞いがどのように再定義され、アナログがどのように実装されたか-しかし、最終的には元々あった可能性を返す（！）ために独自のスタイルを書きました。
同僚を傷つけず、チーム全体の作業をスピードアップしたい場合は、サイト用に独自のスタイルを作成する際に次のルールを遵守してください。
- 使用するフレームワークに必要な機能がどのように実装されているかを確認してください（覚えている-おそらくそこにある）。
- 希望する外観を実現するために、どのクラスを再定義する必要があるかを見つけます。
- 機能が実装されていない場合、または完全に実装されていない場合-同僚と機能を拡張する便利な方法を調整し、将来のために文書化してみてください。
- 機能がどこでも必要ではなく、特定のページでのみ必要な場合-別のファイルに入れて接続/収集します（インラインスタイルは使用しないでください）
あとがき
上記はすべて私の個人的な意見です。 私はプロのフロントエンド開発者ではありません。通常、新しい機能を追加するときにhtmlとcssに遭遇します。前面と背面の両方をすぐに構成してから、デザインをコームする方が便利です。 チームがプロセスを確立し、適切なコードのルールを説明し、すべての開発者向けにコンパイルされたガイドラインを作成し、すべてがコードレビューを通過した場合、この記事を笑うだけでかまいません。 記事が誰かに役立つと判明した場合、混乱した考えを述べたのは無駄ではありませんでした。