バックエンド開発者の作業を簡単にするために、HTML、CSS、およびJavaScriptを作成するにはどうすればよいですか？

デザイナーからデザインを取得すると、PSD（Photoshop）ファイルとして取得します。私は常に適切なレイヤーとフォルダー名、基本的にはクリーンで管理されたPSDを期待しています。この設計から、HTML、CSS、およびJavaScriptを開発し、バックエンド開発者に提供します。彼らが理解しやすくするために、私は

• セマンティックコードを書く、
• JavaScriptとCSSを外部ファイルに保存し、
• HTML、CSS、JSファイルに有用なコメントを追加し、
• CSSスプライトを使用します（開発者は気に入らないが）。
• HTML5ボイラープレートを使用し、
• JavaScriptにjQueryを使用し、
• 可能な限り、新しいHTML5タグとCSS3を使用してみてください。
• HTML、CSS、JS、および画像を含むZipファイルを送信しました。

レイアウトに小さな変更を加える必要がある場合、開発者がそれを処理できると期待しています。

バックエンド開発者や他のCSS忍者から、バックエンドシステムとの統合を容易にするためのファイルの構成とマークアップの観点から、もっとできること（つまり、バックエンドテクノロジー、PHP、.NET）を聞きたいです。 、Rubyなど）異なるクライアントは異なるシステムを使用します。

これらの答えの多くは幅広いアイデアを網羅していますが、ここに私の個人的なものがあります：

• エラーメッセージのためにフォームデザインにスペースを残してください。
• 入力ボックスにラベルを付けないでください！
• CSSとJavaScriptを別のファイルに入れます。ただし、自分が何をしているのかが分からず、適切に気分が悪い場合を除きます。
• ページ間で設計要素を同じにします。デザインコンポーネント（「最近表示した」ボックスなど）がすべてのページで異なるマークアップを持っていると、イライラします。
• あなたにとって簡単なことをしないで、正しいことをしてください。<button>タグは吸う。backround-image本当に<img>タグが必要なもののために。
• ページコンポーネントを作成する場合は、スケーリングできることを確認してください。ほとんどの優れたフロントエンド開発者がこれを行うことは知っていますが、トップ/ボトムキャップの状況であるはずの状況で誰かが単一の画像を使用した場合がたくさんあります。プログラマーはPhotoshopを開くのが好きではありません。
• テンプレートを校正します。プログラマー（優れたプログラマー）は、熱心で詳細志向の人々です。設計に問題が見られるようになった場合（フッターナビゲーションにスペルミスや矛盾したスペルが含まれている可能性があります）、質問をして作業を遅くします。

最後に、そしておそらく最も重要なこと：

• バックエンドで開発されている言語の基本的な規則を学びます。PHPテンプレートを見てforeach、ifステートメントまたはステートメントの背後にある基本的な構文と、ステートメントのフォーマットechoや<?php ?>タグの移動方法を理解できると、フロントエンド開発者としての価値が大幅に向上します。簡単な変更を加えて、すべてのファイルの新しいzipを渡す代わりに、テンプレートでそれを行うことができます。
• 補遺として、バージョン管理ソフトウェアの使用方法を学びます。あなたは専門家である必要はありませんが、2つのzipファイル間で何が変更されたかを把握する代わりに差分を見ることができれば、私の仕事は100倍簡単になります。

それらはほんの数例です。もっとたくさんあると思いますが、これらすべてを達成すれば、テンプレートをWebサイトに変えている人の尊敬と感謝を得ることができます。

バックエンドの人の生活を楽にするだろうと私が考えることができる明白なことは、行動の単純さです。さまざまな動作（ロールオーバー、メニューなど）を持つWebページの要素を設計する場合、この動作はすべて、共通の方法で標準化する必要があります。これにより、開発者が継続的に何らかの機能を決定するために何らかのチャートに戻る必要がなくなりますページを動作させるために呼び出す必要があります。

グリッドは、データまたは機能のセル操作によるセルを必要としません。ページのブロック要素は、コードビハインドで簡単にセグメント化できるように、共通要素として簡単に定義できる必要があります。これにより、開発者はコードを再利用したり、ページのさまざまなファセット間の通信を促進したりできます。

ページの領域は、特定の設計境界を越えてはなりません。ある要素からのアイテムが別の要素からのアイテムに侵入してはいけません。

ただし、デベロッパーに燃え上がるようなフープを飛び越えさせることを避けられないという点があります。一部のインターフェイス要素は、その性質上、構築が難しい場合があります。

バックエンド開発者向けにソリューションを簡単に修正できるようにするか、最適化するかを選択する必要がある場合があることに注意してください。

引用したCSSスプライトは良い例です。スケーラビリティとパフォーマンスが重要で、すべてのページの100個の画像、5個のCSS、15個のJavaScriptファイルへのリンクがある場合、誰かがWebサイトを作成する方法を理解していません。一方、CSSスプライトは保守が容易ではなく、設計のわずかな変更には多くの作業が必要になる場合があります。

たとえば、3つの状態アイコンが1つ下にあり、4つ目の状態を追加する必要がある場合、4つ目のアイコンを他の3つとは別に画像の下部に追加しますか？または、3番目のアイコンの後に追加し、他のすべてを下に移動して、いくつかの空のスペースを確保しますか？

同じことは、CSSファイルとJavaScriptファイルを組み合わせて縮小することでも可能です。ある程度の規模のWebサイトでそれを行う必要がありますが、追加の労力が必要になります。

CDNでもまったく同じです。大規模なWebサイトで使用する必要がありますが、変更を加えるのはより困難です。あなたはCSSファイルを変更した場合たとえば、あなたは、ファイルへのURIを変更することで、新しいものをダウンロードするには、ブラウザを強制する必要がありcdn.example.com/g.css?r=2、その後、cdn.example.com/g.css?r=3など

また、「簡単」は相対的です。たとえば、CSSコードを記述するためのガイドラインを参照してください。個人的には、空白のない1行につき1つのスタイルを好みます。

#TopMenu a{text-decoration:none;color:#fff;padding:5px 10px;float:left;}

ほとんどの人はこの構文を嫌い、私が嫌いで読みにくいと思うものを好みます（いいえ、私は狂っていません）：

#TopMenu a
{
    text-decoration: none;
    color: #fff;
    padding: 5px 10px;
    float: left;
}

同様に、jQueryを使用しても、バックエンド開発者がファイルを簡単に変更できるようになるわけではありません。一部の開発者はPrototypeまたは他のフレームワークに精通しているためです。

開発者が読みたい場合は、すべての場合で詳細なドキュメントが役立ちます（ほとんどのドキュメントは読みません）。また、特定の開発者に行うことをどのように好むかを正確に尋ね、フレームワークを構築しながら最初から並行して作業することにより、開発者の生活を楽にすることができますファイルを結合します）。

すべての世界で最高ののは、デザイナーがzipファイルを壁に投げつけずに、実際に開発者の1人としてプロジェクトで作業しているときです。セットアップには少し手がかかる必要がありますが、設計と開発の間に翻訳がなく、誰もが同じイテレーションに参加できる場合、それは本当に素晴らしいです。優れた摩擦のないアジャイルプロセスを実現できれば、それを実現するのはそれほど難しくありません。

ほとんどの場合、バージョン管理された方法で作業し、それを配布メカニズムとして使用している設計者に対して解決します。私は本当に小さな変更があるたびに大きな太ったzipファイルを扱いたくありません。

あなたにとっての柔軟性とは、通常彼らにとっての柔軟性です。フォローしているこれらのベストプラクティスはすべて、アプリの両面でのメリットです。

ただし、重要で見逃されがちな点の1つは、堅牢なUIの作成です。非常に多くのUIコンポーネントが1つのコンテキストまたは過度に厳密なHTMLセットに過度に固定されており、CSSが失敗するように設定されています。

たとえば、ドロップダウンがある場合、JQueryハンマーを引き出してそれをホバリングする座標を取得するよりも、相対セット（座標は不要）でクリックされたコンテナ内に絶対位置のドロップコンポーネントを固定するJS作業がはるかに少ない要素の上に置き、所定の位置に貼り付けます。また、ページが移動したり、新しいブラウザー機能が位置情報をスローしたりした場合でも、破損する可能性ははるかに低くなります。JSの作業を避けるためにHTML / CSSのスキルに依存するほど、UIは通常より堅牢になります。

一般的なルールとして、UIコンポーネントに必要なものは、適切なIDまたはクラスで住むHTMLタグだけであることを確認しようとします。UIを壊さずにコンテナでできることや、コンテナの寸法が変化するにつれてコンテナが実際に拡大/縮小のように収まるようにすればするほど、クライアント側を必要とせずにアプリのどの部分にも簡単に実装できますエキスパート。彼らがしなければならないのは、それにクラスを付けることです。

UIコンテナのイベント委任を優先して、ボタンなどのエンドポイントノードにリスナーを直接割り当てます。そのUIコンポーネントは現在、静的HTMLで動作する可能性がありますが、innerHTMLなどで内部のHTMLをリッピングして書き換えることができるようになるのはいつかはわかりません。コンテナが完全であり、すべてのイベントが委任されている場合（jqueryの 'on'メソッドを参照）、そのことを心配する必要はなく、HTMLの置換がリスナーを中断する難しい方法を学習することはありません。

オプションとして委任を維持するために、エンドポイントノード以外の場所ではstopPropagateを使用しないでください。

レイアウトに関しては、HTMLを最小限、セマンティックに保ち、divラッパーを避けてください。HTMLが少なければ少ないほど、レイアウトの新人がレイアウトの問題を診断しやすくなります。

ユーティリティCSSにはわかりやすいクラス名を使用してください。「行」クラスは、「clearfix」よりもCSS初心者にとってより明確です。

常に一意のセクション要素、一意のIDを指定してください。セクションに固有のものがどこで発生しているのかを特定するのがはるかに簡単になり、内容をオーバーライドするのが簡単になり、読みやすさとパフォーマンスJSの勝利にもなります。

明らかに、クラススキームを過度に使用するのは悪いニュースですが、バックエンドの開発者が適切なクラスを物事に追加するだけで設定できるほど、既存のページを簡単に変更できるようになります。

そしてもちろん、プロジェクトの最初に、少なくともこの1つのことに同意してもらいます。バックエンドとフロントエンドはHTMLとJSONのみを介して接続します。「JavaScriptを作成してくれるもの」を使用させないでください。それは血まみれの混乱とメンテナンスの悪夢です。

開発関連のすべてのものと同様に、DRYとミニマリズムを好みます。

まだコメントすることはできません（とても愚かです）が、個人的なメモとして、私は毎日PHPコーダーと背中合わせに作業し（彼の作業を支援する）、私たちが見つけた最も簡単なツールはKomodoのツールボックスを使用して、toolboxx内の各ビュー/コントローラー/モデルの「転送された」変数を一覧表示します。これにより、いつでも、そのページに送信されるデータのセットを中心にページを設計する場合、ツールボックスを見て、送信されているデータと送信されているデータの種類を正確に確認できます。また、その逆も同様です。