Top 6 Best Practices für Frontend-Entwickler

Top 6 Best Practice für Frontend Entwickler

Frontend-Webentwicklung erscheint recht einfach zu sein, wenn man in die Materie einsteigt. Aber das Produzieren eines cleanen und semantisch korrekten Codes ist gar nicht so einfach, wie es erst erscheint und mit Sicherheit ein ziemlich harter Job.

In diesem Artikel habe ich einmal die für mich nützlichsten Dinge zusammengestellt, die mir in den letzten Jahren das Leben erleichtert haben.

1.) – Nutze ein Reset CSS

Falls Du kein absoluter Anfänger in der Webentwicklung bist oder nicht die letzten Jahre als Robinson auf einer einsamen Insel verbracht hast, dann hast Du sicherlich schon von der Nützlichkeit eines Reset CSS gehört. Was genau macht ein Reset-CSS eigentlich? Es setzt jeden Browser sozusagen wieder auf die Werkseinstellungen zurück und sorgt dafür, dass alle Elemente keinen Stil haben, sodass wir in jedem Browser die gleiche Ausgangslage haben, wenn wir später anfangen, für jedes Element einen Stil im CSS festzulegen. Ich persönlich nutze dafür das Reset-CSS von Eric Meyer.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

2.) – Mache deutlich, welches Div Du schliesst

Das ist mit Sicherheit das Beste, was man sich antun kann! Gerade bei größeren Projekten oder bei der Arbeit mit Content Management Systemen kann es bei der Fehlersuche sonst schnell unübersichtlich werden – wenn man sich jedoch angewöhnt jedes einzelne geschlossene DIV zu kennzeichnen, erleichtert man sich die Felersuche ungemein und es erspart richtig viel Zeit.

Kennzeichne jedes geschlossene DIV

3.) – Nutze kein @import

Jap, CSS Dateien kannst Du auch mit @import in ein HTML Dokument importieren. Genau das solltest Du aber besser nicht tun, denn das geht sehr auf die Performance.

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

Deine Webseite lädt wesentlich schneller, wenn Du Deine CSS Dateien ganz konservativ über ein Link Element lädst.

<link rel='stylesheet' type='text/css' href='reset.css'>
<link rel='stylesheet' type='text/css' href='style.css'>

Du kannst jedoch die @import Regel gerne in dafür nutzen, ein CSS Dokument in ein anderes zu laden, denn dies hat keine großen Auswirkungen auf die Geschwindigkeit.

importieren von CSS Dokumenten in ein CSS Dokument

4.) – Halte Deinen HTML Code clean

CSS und Javascript haben nichts im HTML Code zu suchen, sondern gehören in externe Dokumente ausgelagert, die mittels Link Element eingebunden werden. Ein schlechtes Beispiel:

<a id="hechtmediaarts" href="http://www.hechtmediaarts.com/" onclick="alert('I love this site!');">Fucking cool web site</a>

Zum selben und besseren Ergebnis kommst Du, wenn Du einige wenige Zeilen jQuery einsetzt:

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

5.) – Platziere JavaScript immer in den Footer

Es scheint wahnsinnig populär zu sein, Javascript in den Head Bereich zwischen <head> und </head> zu platzieren. Klar kann man das machen – und funktionieren tut es ja auch. Trotzdem ist es sehr suboptimal, denn das sorgt für langsameres Laden der Webseite. Das Problem ist, dass das Javascript vor dem Inhalt geladen wird, weil Javacript Priorität geniesst. Platziert man das Javascript hingegen in den Seitenfuß, wird der Inhalt zuerst geladen und dann das Javascript im Hintergrund. Der große Vorteil für den Besucher der Webseite ist, dass sich die Webseite wesentlich schneller aufbaut.

   ...
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript' src='general.js'></script>
  </body>
</html>

6.) – Schreibe semantisches HTML

HTML ist keine Programmier-, sondern eine Auszeichnungssprache, die dafür genutzt werden soll, strukturierte HTML-Dokumente zu schreiben. Auch und gerade Google legt auf diese Semantik großen Wert, sie hat Auswirkungen auf die Platzierung in den Suchergebnissen. Als kleines Beispiel: Sorge dafür, dass die Elemente in Deinem HTML Dokument dafür genutzt werden, wofür sie auch gedacht sind.

Beispiele:

Eine Überschrift muss immer mit einem <h> Element ausgezeichnet werden – je nach Wichtigkeit der Überschrift mit <h1> bis <h6>.

<div>
<h1>Das ist eine Überschrift</h1>
</div>

Demzufolge sollte ein Navigationmenü 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>

Fazit:

Mit einigen kleinen Änderungen in der eigenen Arbeitsweise kann man sich viel Stress ersparen. Abschließend sollte noch gesagt werden, dass man seinen Code unbedingt mit allen wichigen Browsern testen sollte, um vor späteren Überraschungen gewappnet zu sein.

Fröhliches coden noch :-)

3 Kommentare zu “Top 6 Best Practices für Frontend-Entwickler”

  1. Tobi sagt:

    Ich ging bis jetzt auch immer davon aus, das Javascript in den Head Bereich gehört. Da ist er auch immer gelandet bis jetzt, danke für den Tipp!

  2. Emanuel sagt:

    Am ende ist 6. am wichtigsten, da man ja in der Suche gut gefunden werden möchte. Super Tipps danke =)

Hinterlasse eine Antwort