Top 10 Web Development Best Practices

Erläutern Sie, welches Div Sie schließen

Wenn ich mir den Quellcode einer Website ansehe, sehe ich meistens ganz unten auf der Seite eine fast endlose Liste von schließenden </div>-Tags. Viele Anfänger denken, dass sie einfach Divs statt Tabellen verwenden müssen, um hochwertigen Code zu produzieren. Divs sind sauberer als Tabellen, aber ohne die richtige Organisation des Codes kann er genauso (oder manchmal sogar noch mehr) unordentlich sein wie tabellenbasierter Code.

Einrücken ist ein guter Anfang. Aber ein Tipp, mit dem Sie definitiv viel Zeit sparen können, ist jedes div-Tag, das Sie schließen, zu kommentieren, wie im folgenden Beispiel gezeigt:

<div> <div class="first left"> ... </div><!-- #sub.first.left --></div><!-- #header -->

Verwenden Sie einen CSS-Reset

Wenn Sie kein Anfänger sind oder in den letzten 6 Jahren auf einer einsamen Insel Urlaub gemacht haben, wissen Sie vielleicht schon, wie nützlich ein CSS-Reset ist. Da Browser standardmäßig nicht dasselbe Standard-Styling auf HTML-Elemente anwenden, stellt ein CSS-Reset sicher, dass alle Elemente keinen bestimmten Stil haben, so dass Sie Ihren eigenen definieren können, ohne das Risiko vieler browserübergreifender Rendering-Probleme.

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}/* remember to define focus styles! */:focus {outline: 0;}/* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;}/* tables still need 'cellspacing="0"' in the markup */table {border-collapse: collapse;border-spacing: 0;}

Quelle: https://meyerweb.com/eric/tools/css/reset/index.html

Don’t use @import

CSS-Dateien können mit der @import-Direktive eingebunden werden. Dies kann nützlich sein, wenn man zum Beispiel ein Stylesheet in ein anderes einbinden möchte. Eine andere gängige Praxis ist die Einbindung von CSS-Dateien in Html-Dokumente mit Hilfe der folgenden Methode:

<style type="text/css> @import url('a.css'); @import url('b.css');</style>

Die @import-Direktive funktioniert zwar, ist aber viel langsamer als die anderen Methoden zur Einbindung von Stylesheets in ein Html-Dokument:

<link rel='stylesheet' type='text/css' href='a.css'><link rel='stylesheet' type='text/css' href='proxy.css'>

Auf Websites mit geringem Traffic macht das keinen Unterschied, aber wenn Sie die Chance haben, eine beliebte Website zu besitzen, sollten Sie die Zeit Ihrer Besucher nicht mit @import verschwenden.
Quelle: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

„Smush“ your images

Als Entwickler fand ich es immer schwierig, meine Bilder für das Web zu optimieren. Ich habe es mit dem guten alten Photoshop-Befehl „Für Web speichern“ versucht, aber meistens hatte ich am Ende Bilder, die entweder zu groß oder von unzureichender Qualität waren.
Als Ergebnis hatte ich die schlechte Angewohnheit, nicht optimierte Bilder auf meinen Websites zu verwenden. Das ist kein Problem, wenn man sich nicht um die Bandbreite seiner Website kümmern muss, aber nach meinem kürzlichen Wechsel auf meinen Virtual Private Server musste ich mit den Bildgrößen vorsichtig sein.

Zu dieser Zeit fand ich ein sehr cooles Tool namens Smush It: Sie geben Ihre nicht optimierte Bildurl ein, und Smush It erstellt ein perfekt optimiertes Bild für Sie. Sie können bis zu 70 % der Dateigröße einsparen, während die Originalqualität erhalten bleibt. Als Beispiel wurden alle Bilder aus meiner Liste von Online-Code-Editoren „zerkleinert“.

Mischen Sie CSS nicht mit HTML

Als Auszeichnungssprache dient HTML dazu, Dokumente zu organisieren, indem Kopf- und Fußzeilen, Listen, Blockzitate usw. definiert werden. Vor einiger Zeit benutzten Front-End-Webentwickler oft veraltete HTML-Attribute, um ein bestimmtes Element zu gestalten.
Heutzutage erlaubt das style-Attribut Entwicklern, CSS direkt in ein HTML-Dokument einzufügen. Das ist sehr nützlich zum Testen oder wenn man in Eile ist. Aber das style-Attribut ist eine schlechte Praxis, die völlig gegen die CSS-Philosophie verstößt.

Das folgende Beispiel zeigt, wie schmutzig und schwer lesbar eine einfache Codezeile mit dem style-Attribut werden kann:

<a href="https://catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">Cats Who Code</a>

Mischen Sie kein Javascript mit HTML

Genauso wie es eine schlechte Praxis ist, Ihren HTML-Code mit CSS zu mischen, sollten Sie kein Javascript in Ihren HTML-Dokumenten verwenden. Die folgende schlechte Praxis veranschaulicht ein onclick-Ereignis:

<a href="https://catswhocode.com" onclick="alert('I love this site!');">Cats Who Code</a>

Das gleiche Ergebnis kann mit ungehindertem Javascript erzielt werden. In diesem Beispiel verwende ich das beliebte jQuery-Framework:

$(document).ready(function() { $('#cwc').click(function() { alert('I love this website'); });});

Das mag anfangs etwas schwieriger erscheinen, besonders für Anfänger; aber das ist es definitiv nicht, und es wird Ihr Html-Dokument sauber halten.

Sie wissen es, der IE ist scheiße, und einige Kunden sind noch scheußlicher, weil sie von Ihnen verlangen, Webseiten zu erstellen, die mit diesem veralteten Browser kompatibel sind. Um bestimmte Versionen des IE anzusprechen, können Sie die bekannten IE-Hacks verwenden, wie unten gezeigt:

height: 200px; /* normal browsers */_height: 300px; /* IE6 */.height: 250px; /* IE7 */*height: 350px; /* All IEs */

Diese Hacks sind manchmal sehr nützlich, aber sie sind nicht der beste Weg, um eine bestimmte Version des IE anzusprechen, und es wird dazu führen, dass Ihre CSS-Validierung fehlschlägt.

Sie sollten stattdessen den unten gezeigten bedingten Kommentar verwenden, um den IE6 anzusprechen.

<link href="style.css" rel="stylesheet" type="text/css" /><!--> <link href="ie.css" rel="stylesheet" type="text/css" /><!-->

Javascript-Datei am Ende platzieren

Eine beliebte Praxis der späten 90er/Anfang 2000er Jahre war es, Javascript-Dateien innerhalb der <head> und </head> Tags zu platzieren. Das Problem ist, dass Ihre Javascript-Dateien zuerst geladen werden und folglich Ihr Inhalt erst danach.

Indem Sie Javascript-Dateien am Ende Ihrer Dokumente platzieren, stellen Sie sicher, dass die JS-Dateien erst geladen werden, wenn der Inhalt richtig angezeigt wurde.

 ... <script type='text/javascript' src='jquery.js?ver=1.3.2'></script> </body></html>

Verwenden Sie HTML semantisch

HTML ist keine Programmiersprache. Es ist eine Auszeichnungssprache, die dazu dient, strukturierte Dokumente zu erstellen, indem sie eine strukturelle Semantik für Text wie Überschriften, Absätze, Listen usw. angibt.
Wenn Sie in den guten alten 90er Jahren oder zu Beginn des Jahrhunderts mit der Erstellung von Websites begonnen haben, wissen Sie, wie schmutzig das Markup damals war. Aber glücklicherweise hat es sich weiterentwickelt.
Neben anderen Dingen ist es wichtig, HTML-Elemente semantisch zu verwenden. Zum Beispiel sollte ein Navigationsmenü immer eine ungeordnete Liste sein:

<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li></ul>

Testen Sie während der Entwicklung, um Probleme mit verschiedenen Browsern zu vermeiden

Einer der größten Fehler, den ich bei der Entwicklung von HTML, CSS und Javascript gemacht habe, war, dass ich meine Seiten nicht in verschiedenen Browsern getestet habe, während ich sie geschrieben habe. Stattdessen habe ich meinen gesamten Code geschrieben und nur in Firefox betrachtet, um zu sehen, wie er gerendert wurde.
In der Theorie sollte das gut sein. Aber wie Sie wissen, sind Cross-Browser-Probleme ein großes Problem für Front-End-Entwickler, insbesondere wegen des IE. Wenn Sie Ihre Dokumente auf Firefox/IE/Chrome testen, während Sie sie schreiben, sind Cross-Browser-Rendering-Probleme viel einfacher zu beheben. Ich habe Stunden verloren, weil ich es nicht getan habe, und ich hoffe, dass dieser letzte Tipp Ihnen hilft, Ihre wertvolle Zeit zu sparen. Viel Spaß beim Kodieren 😉

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.