Wie kann ich HTML, CSS und JavaScript schreiben, um Back-End-Entwicklern die Arbeit zu erleichtern?

Wenn ich ein Design von einem Designer bekomme, bekomme ich es als PSD-Datei (Photoshop). Ich erwarte immer die richtigen Layer- und Ordnernamen, im Grunde eine saubere und verwaltete PSD. Aus diesem Design heraus entwickle ich HTML, CSS und JavaScript und liefere es an die Back-End-Entwickler. Um es ihnen leicht zu machen, zu verstehen, ich

• semantischen Code schreiben,
• Halten Sie JavaScript und CSS in externen Dateien.
• nützliche Kommentare in HTML-, CSS- und JS-Dateien hinzufügen,
• Verwenden Sie CSS-Sprites (obwohl Entwickler es nicht mögen),
• Verwenden Sie HTML5 Kesselplatte,
• Verwenden Sie jQuery für JavaScript.
• Versuchen Sie, wann immer möglich, neue HTML5-Tags und CSS3 zu verwenden
• hat eine Zip-Datei mit HTML, CSS, JS und Bildern gesendet.

Ich gehe davon aus, dass die Entwickler damit umgehen können, wenn kleine Änderungen am Layout vorgenommen werden müssen.

Ich würde gerne von Back-End-Entwicklern und anderen CSS-Ninjas hören, was man in Bezug auf die Organisation von Dateien und das Markup noch tun kann, um die Integration in Back-End-Systeme (dh Back-End-Technologien, PHP, .NET) zu vereinfachen , Ruby usw.) Unterschiedliche Clients verwenden unterschiedliche Systeme.

Viele dieser Antworten werden die breiten Ideenbereiche abdecken, aber hier sind meine persönlichen:

• Lassen Sie im Formularentwurf Platz für Fehlermeldungen.
• Setzen Sie keine Etiketten in die Eingabefelder!
• Legen Sie Ihr CSS und JavaScript in einer separaten Datei ab, es sei denn, Sie wissen, was Sie tun, und fühlen sich richtig schlecht dabei.
• Halten Sie die Designelemente zwischen den Seiten gleich. Es ist ärgerlich, wenn eine Designkomponente (wie ein "kürzlich angesehenes" Feld) auf jeder Seite ein anderes Markup aufweist.
• Tu nicht, was dir leicht fällt, tu, was richtig ist. <button>Tags saugen. backround-imagefür Dinge, die eigentlich <img>Tags sein sollten, saugen.
• Stellen Sie sicher, dass beim Erstellen einer Seitenkomponente diese skaliert werden kann. Ich weiß, dass die meisten guten Front-End-Entwickler dies tun, aber ich hatte viele Fälle, in denen jemand ein einzelnes Bild in einer Situation verwendet hat, in der es sich um eine Top / Bottom-Cap-Situation handeln sollte. Programmierer öffnen Photoshop nicht gern.
• Korrekturlesen Sie Ihre Vorlagen. Programmierer (gute) sind engagierte, detailorientierte Menschen. Wenn sie Probleme in Ihrem Design sehen (möglicherweise weist die Fußzeilennavigation Rechtschreibfehler oder inkonsistente Rechtschreibung auf), werden sie Fragen stellen und ihre Arbeit verlangsamen.

Zum Schluss und vielleicht am wichtigsten:

• Lernen Sie die grundlegenden Konventionen der Sprache, die im Backend entwickelt wird. Wenn Sie sich eine PHP-Vorlage ansehen und die grundlegende Syntax hinter einer foreachoder einer ifAnweisung verstehen und wissen, wie eine echoAnweisung formatiert oder ein <?php ?>Tag verschoben wird, erhöht sich Ihr Wert als Front-End-Entwickler erheblich - ich liebe es, wenn ein Front-End-Entwickler dies benötigt um eine einfache Änderung vorzunehmen und dies in der Vorlage zu tun, anstatt mir eine neue Zip-Datei aller ihrer Dateien zu übergeben.
• Lernen Sie als Ergänzung den Umgang mit Versionskontrollsoftware. Sie müssen kein Experte sein, aber wenn ich mir einen Unterschied ansehen kann, anstatt herauszufinden, was sich zwischen zwei Zip-Dateien geändert hat, wird meine Arbeit hundertmal einfacher.

Dies sind nur einige - ich bin sicher, dass es noch viele weitere gibt, aber wenn Sie all dies erreichen, werden Sie sicher den Respekt und die Wertschätzung derjenigen verdienen, die Ihre Vorlagen in eine Website verwandeln.

Die offensichtlichen Dinge, an die ich denken kann, die das Leben eines Back-End-Mannes erleichtern würden, sind einfache Verhaltensweisen. Beim Entwerfen von Elementen einer Webseite mit unterschiedlichen Verhaltensweisen (Rollover, Menüs usw.) sollte dieses Verhalten auf eine gemeinsame Weise standardisiert werden, damit der Entwickler nicht ständig auf ein Diagramm zurückgreifen muss, um zu bestimmen, welche Funktion er hat muss aufrufen, damit sich eine Seite verhält.

Gitter sollten keine zellenweise Manipulation von Daten oder Funktionen erfordern. Blockelemente von Seiten sollten leicht als allgemeine Elemente definierbar sein, damit sie leicht im Code dahinter segmentiert werden können. Dies hilft dem Entwickler bei der Wiederverwendung von Code und / oder bei der Erleichterung der Kommunikation zwischen verschiedenen Facetten der Seite.

Bereiche der Seite sollten bestimmte Designgrenzen nicht überschreiten. Elemente aus einem Element sollten nicht in Elemente aus einem anderen Element eindringen.

Es kommt jedoch ein Punkt, an dem Sie es einfach nicht vermeiden können, die Entwickler durch brennende Reifen springen zu lassen. Einige Elemente der Benutzeroberfläche werden von Natur aus schwierig zu erstellen sein.

Beachten Sie, dass Sie manchmal die Wahl treffen müssen, ob Sie eine Lösung für einen Back-End-Entwickler einfach ändern oder etwas optimieren möchten.

Die von Ihnen zitierten CSS-Sprites sind ein gutes Beispiel. Ich verstehe nicht, wie jemand eine Website erstellen kann, wenn Skalierbarkeit und Leistung wichtig sind, und auf jeder Seite Links zu 100 Bildern, 5 CSS- und 15 JavaScript-Dateien hat. Auf der anderen Seite sind CSS-Sprites nicht einfach zu warten, und geringfügige Änderungen im Design erfordern möglicherweise viel Arbeit.

Wenn Sie beispielsweise drei Statussymbole untereinander haben und einen vierten Status hinzufügen müssen, fügen Sie das vierte Symbol am unteren Rand des Bildes getrennt von drei anderen hinzu? Oder fügen Sie es nach dem dritten Symbol hinzu und verschieben alles andere nach unten, um freien Platz dafür zu haben?

Gleiches gilt für das Kombinieren und Minimieren von CSS- und JavaScript-Dateien. Sie müssen dies für eine Website mit einer gewissen Größe tun, dies würde jedoch zusätzlichen Aufwand erfordern.

Für CDN ist es genau das Gleiche. Sie müssen es für große Websites verwenden, aber Änderungen wären schwieriger vorzunehmen. Wenn Sie zum Beispiel einer CSS - Datei geändert wird , müssen Sie den Browser zwingen , die neuen zu downloaden, indem Sie den URI zum Ändern der Datei zu cdn.example.com/g.css?r=2, dann cdn.example.com/g.css?r=3usw.

Auch "einfacher" ist relativ . Siehe zum Beispiel die Richtlinien zum Schreiben von CSS-Code: Ich persönlich bevorzuge einen Stil pro Zeile ohne Leerzeichen:

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

Während die meisten Leute diese Syntax hassen und die bevorzugen, die ich hasse und die schwer zu lesen ist (nein, ich bin nicht verrückt):

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

Auf die gleiche Weise bedeutet die Verwendung von jQuery nicht, dass Sie Back-End-Entwicklern das Ändern Ihrer Dateien erleichtern, da einige Entwickler mehr Erfahrung mit Prototype oder anderen Frameworks haben.

In allen Fällen ist eine detaillierte Dokumentation hilfreich, wenn der Entwickler sie lesen möchte (die meisten von ihnen nicht). Sie können das Leben eines Entwicklers auch vereinfachen, indem Sie den jeweiligen Entwickler genau fragen, wie er die zu erledigenden Aufgaben bevorzugt, und zu Beginn Seite an Seite arbeiten , während Sie ein Framework erstellen (z. B. den Workflow entwerfen, der zur Minimierung verwendet werden soll und kombinieren Sie die Dateien).

Das Beste von allen Welten ist, wenn der Designer keine Zip-Datei über eine Wand wirft und tatsächlich als einer der Entwickler im Projekt arbeitet. Zum Einrichten ist ein wenig Handarbeit erforderlich, aber es ist wirklich fantastisch, wenn es keine Übersetzung zwischen Design und Entwickler gibt und jeder an denselben Iterationen teilnehmen kann. Wenn Sie einen reibungslosen, agilen Prozess haben, ist es nicht allzu schwer, dies zu erreichen.

In den meisten Fällen würde ich mich damit zufrieden geben, dass die Designer versioniert arbeiten und dies als Verteilungsmechanismus verwenden. Ich möchte wirklich nicht jedes Mal mit einer großen, fetten Zip-Datei umgehen, wenn es eine kleine Änderung gibt.

Flexibilität ist für Sie in der Regel Flexibilität. Alle Best Practices, die Sie befolgen, sind Gewinne auf beiden Seiten der App.

Ein kritischer und oft übersehener Punkt ist jedoch das Schreiben einer robusten Benutzeroberfläche. Viel zu viele UI-Komponenten sind zu stark in einem Kontext oder einem zu anspruchsvollen HTML-Satz verankert, und CSS ist so eingerichtet, dass es fehlschlägt.

Wenn Sie beispielsweise ein Dropdown-Menü haben, ist es weitaus weniger JS-Arbeit, eine absolut positionierte Drop-Komponente in einem relativ angeordneten (keine Koordinaten erforderlich) angeklickten Container zu verankern, als den JQuery-Hammer herauszuziehen und die Koordinaten zum Schweben zu bringen über das Element und kleben Sie es einfach an Ort und Stelle. Es ist auch viel weniger wahrscheinlich, dass es in Fällen, in denen sich die Seite verschiebt oder eine neue Browserfunktion Positionsinformationen abwirft, kaputt geht. Je mehr Sie sich auf HTML / CSS-Kenntnisse verlassen, um JS-Arbeit zu vermeiden, desto robuster ist Ihre Benutzeroberfläche normalerweise.

In der Regel versuche ich sicherzustellen, dass meine UI-Komponenten nur ein HTML-Tag mit einer geeigneten ID oder Klasse benötigen. Je mehr Dinge Sie mit diesem Container tun können, ohne dass die Benutzeroberfläche im Inneren beschädigt wird oder wenn der Container tatsächlich angepasst wird, z. B. erweitert / verkleinert, um ihn an die sich ändernden Containerabmessungen anzupassen, desto einfacher kann er auf jedem Teil der App implementiert werden, ohne dass eine Clientseite erforderlich ist Experte. Alles was sie tun müssen, ist eine Klasse darauf zu kleben.

Ziehen Sie die Ereignisdelegierung in UI-Containern der direkten Zuweisung von Listenern zu Endpunktknoten wie Schaltflächen vor. Diese UI-Komponente funktioniert jetzt möglicherweise mit statischem HTML, aber Sie wissen nie, wann jemand in der Lage sein möchte, den HTML-Code mit innerHTML oder Ähnlichem herauszureißen und neu zu schreiben. Wenn der Container intakt ist und alle Ereignisse delegiert sind (siehe die jquery-Methode 'on'), müssen Sie sich darüber keine Sorgen machen, und sie werden möglicherweise nie lernen, wie schwierig es ist, HTML-Listener durch das Ersetzen von HTML zu unterbrechen.

Verwenden Sie stopPropagate nur als Endpunktknoten, um die Delegierung als Option beizubehalten, und senden Sie Hass-Mails an Entwickler von idiotischen Frameworks, die sie überall als Spam versenden.

Halten Sie das HTML in Bezug auf das Layout minimal, semantisch und vermeiden Sie Div-Wrapper. Je weniger HTML vorhanden ist, desto einfacher sind Layoutprobleme für Layout-Neulinge zu diagnostizieren.

Verwenden Sie selbsterklärende Klassennamen für das Dienstprogramm CSS. Eine "Zeilen" -Klasse ist für CSS-Noobs wahrscheinlich klarer als "Clearfix".

Geben Sie immer eindeutige Schnittelemente und eindeutige IDs an. Es macht es viel einfacher zu identifizieren, wo bestimmte Dinge in einem Abschnitt geschehen, es ist einfacher, Dinge zu überschreiben, und es kann auch ein Lesbarkeits- und Leistungsgewinn für JS sein.

Natürlich ist es eine schlechte Nachricht, mit einem Klassenschema übertrieben zu werden, aber je mehr ein Back-End-Entwickler durch einfaches Hinzufügen der richtigen Klassen zu den Dingen festlegen kann, desto einfacher wird es für ihn, Änderungen an der vorhandenen Seite vorzunehmen.

Und natürlich sollten sie sich zu Beginn des Projekts zumindest auf eines einigen: Back- und Front-End-Verbindung nur über HTML und JSON. Lassen Sie sie nicht Dinge verwenden, die "das JavaScript für Sie schreiben!" Es ist eine blutige Sauerei und ein Alptraum für die Instandhaltung.

Wie bei allen entwicklungsbezogenen Dingen bevorzugen Sie TROCKEN und Minimalismus.

Es lässt mich immer noch nicht nur kommentieren (so dumm), aber als persönliche Anmerkung, würde ich erwähnen, arbeite ich jeden Tag hintereinander mit einem PHP-Codierer (und helfe bei seiner Arbeit) und das einfachste Tool, das wir gefunden haben, ist zu nutzen Komodo , wenn ich auf dieser Seite eine Seite um eine Reihe von Daten gesendet bei der Gestaltung, ich ‚s Toolbox und Auflistung Variablen jede Ansicht / Controller / Modells in der toolboxx‚übertragen‘, das so jederzeit, bin auf der Suche kann in der Toolbox nachsehen, welche Daten gesendet werden und in welchem ​​"Typ" sie gesendet werden, und umgekehrt. Nur ein Tipp.