Tipps für das Schreiben
von besseren Quellcode
und gute Zusammenarbeit im Team.

Allgemeine Tipps

Vielen Dank an Attribute-Alex, Daniel-DOM und Flexbox-Florian für die Grundlage dieses Stylguides.
Mediengestalter der 12MED 2016/2017, Arnold-Bode-Schule.
(ORDER BY name ASC)

Generelle Tipps

BezeichnungBeschreibung
Divida et imperaTeile und herrsche. Brich die Komponenten auf ein für Dich verständliches Niveau herunter. Das gilt besonders wenn Du ein Projekt übernimmst. Druck es Dir aus. Gliedere die Bereiche. Markiere die Funktionen und recherchiere alles was Dir unbekannt ist. Bring den Code dann in eine Struktur die für Dich bzw. Euch üblich ist und füge deine Erklärungen als Kommentare an den entsprechenden Stellen ein.
EinzugGestalte deinen Texteinzug mit 2 Leerzeichen. Verwende keine Tabs. Mixe auch keine Tabs und Leerzeichen für die Einzüge.
EnglischCODE ist eine Plattform für Einsteiger. Daher wird hier viel Wert auf verständliche Sprache gelegt. Die eigentliche Sprache für Web ist Englisch. Da kommt man nicht vorbei und sollte seine Projekte auch entsprechend anlegen und dies konsequent bei Namensgebung und Kommentaren durchziehen.
Kein Modor- oder HighlanderBau deine Klassen im CSS oder Funktionen im JS modular auf. Vermeide gigantische Klassen in denen alle Eigenschaften definiert sind. Diese Modor-Klassen (eine um alles zu knechten) bzw. Highlander-Klassen (es kann nur eine geben) machen die spätere Pflege und Korrektur meist extrem aufwendig. Außerdem kann man solche Modor/Highlander Klassen bzw. Funktionen schlecht von einem in das nächste Projekt übertragen.
KleinschreibungBenutze für Quellcode immer nur die Kleinschreibung.
KommentareKommentare dienen zur Erklärung von Quellcode. Sie sind direkt dort zu setzen, wo Erklärungs-, bzw. Hinweisbedarf besteht. Sinnvoll sind Kommentare für Angaben wie: Wofür benötige ich den Codeabschnitt? Warum habe ich mich für diesen Lösungsweg entschieden ? Oder einfach nur als Markierung. Kommentare sind selbstverständlich optional und nicht verpflichtend. 15 Minuten saubere Kommentierung können Monate später Stunden der Einarbeitung vermeiden.
Modulare KonzeptionBau deine Projekte so auf, dass Du die einzelnen Module (Komponenten) leicht in anderen Projekten erneut nutzen kannst. Bevorzuge generell eine zeitlose Namensgebung und verfasse aussagekräftige Kommentare um auch nach 1-2 Jahren schnell wieder hineinzufinden.
Unnötige Leerzeichen oder TabsEntferne alle unnötigen Leerzeichen oder Tabs. Insbesonders nachstehender Leerzeichen sind unnötig und können automatische Datei-Vergleiche umständlicher machen.

HTML

Tipps für HTML

BezeichnungBeschreibung
</div>-Suppe of hellBau dein Projekt nach semantischen Gesichtspunkten auf. Benutzt Du für alle Elemente einfach nur ein DIV, dann landest Du in der </div>-Suppe of hell.
AnführungszeichenBenutze doppelte Anführungszeichen (" ") statt einfache Anführungszeichen (' ').
HTML ElementeJedes Elements sollte in einer neuen Zeile stehen. Kinder-Elemente werden eingerückt.
HTML ValiditätBenutze gültiges HTML 5.
Multimedia FallbackHalte alternative Inhalte für verschiedene Multimediageräte bereit. Für Bilder (omg) z.B. das alt-Attribut.
SemantikBenutze HTML-Elemente wofür sie bestimmt sind. Benutze zum Beispiel h-Elemente nur für Überschriften und p-Elemente nur für Absätze. Bau auch keine Javascript Konstrukte wenn es bereits HTML Elemente für diese Funktion gibt.
Trennung von FunktionsbereichenTrenne die Bereiche Styling (CSS) und Struktur (HTML) strikt von einander. Versuche die Überschneidungen zwischen den Bereichen, z.B. durch eine Verwendung des style Attribut bei HTML Elementen so gering wie möglich zu halten. Das sollten immer nur Ausnahme-Fälle sein.
Type-AttributeDu brauchst kein "Typ"-Attribute bei Stylesheets und Skripten, es sei denn du benutzt eine andere Styling-Sprache als CSS oder eine andere Skripting-Sprache als Javascript.
UTF-8Stelle sicher das dein Editor UTF-8 als Zeichenkodierung benutzt.
ZeichenreferenzenBenutze keine Zeichenreferenzen. Wenn der Zeichensatz auf UTF-8 gesetzt ist, ist es nicht notwendig Zeichenreferenzen wie —, ” oder &#x263a; zu benutzen. Die einzige Ausnahme sind Zeichen die die HTML-Syntax stören können wie Beispielsweise "<" oder ">".

CSS

Tipps für CSS

BezeichnungBeschreibung
0 wird ausgeschriebenBei Werten wird die 0 angegeben. Es macht deutlicher dass die Zahl kleiner als 1 ist.
Abgrenzung von Abschnitten Bereiche im CSS können mit auffälligen Kommentaren abgegrenzt werden. Bei größeren CSS Angaben hilft auch ein Inhaltsverzeichnis am Anfang. Zwischen Abschnitten werden 3 Leerzeilen gesetzt.
Abgrenzung zwischen Eigenschaft und Wert.Es ist immer ein Leerzeichen zwischen der Eigenschaft und dem dazugehörigen Wert zu setzen.
Abgrenzung zwischen RegelnZwischen zwei verschiedenen Regeln sollte immer 1 Leerzeile gesetzt werden. Dies sollte im Dokument systematisch umgesetzt werden.
Abgrenzung zwischen Selektor und {Es ist immer ein Leerzeichen zwischen dem Selektor und der öffnenden geschweiften Klammer { zu setzen. Die öffnende Klammer sollte zudem immer auf derselben Linie wie der Selektor sein.
Abgrenzung zwischen von Eigenschaften.Jede Eigenschaft muss mit einem Semikolon beendet werden. Die nächste Eigenschaft beginnt in einer neuen Zeile.
AnimationenAnimationen werden mit CSS umgesetzt. Benutze dafür kein Javascript. Animiere für bessere Geschwindigkeit am Besten nur: Transform; Opacity; Color; Border-Color; Background-Color.
Browser-UnterstützungKläre die Browser und Generationen für die Du dein Projekt erstellst und passe die Vendor-Prefixe für diesen Einsatzbereich an. Entwickle in einem modernen Browser wie Google Chrome und nutze dann für die benötigten Vendor-Prefixe Tools wie "Autoprefixer".
CLASS für StylingBenutz Klassen für die Gestaltung und gehe dabei Modulorientiert vor.
CSS SelektionVermeide Kombinationen die Kombination Typ-Seelektoren und ID/Klasse. Die Kombination aus Klasse/ID und Typ-Selektor hingegen kann Sinn machen.
CSS ValiditätBenutze gültiges CSS 3.
HierarchieAlle CSS Regeln sollten der Hierarchie entsprechend eingerückt werden.
ID nur für IdentifikationStyle keine ID im CSS. Benutz ID nur um ein Element eindeutig zu identifizieren. Styling erfolgt mit Klassen.
ID und Klassen-BenennungBenutze sinnvolle ID- und Klassen-Namen. Anstatt präsentative oder kryptische Namen zu verwenden, sollten IDs und Klassen immer den Zweck des fraglichen Elements wiedergeben oder in anderer Form sinnstiftend sein.
ID und Klassen-Benennungs-StilBenutze ID und Klassen-Namen die so kurz wie möglich sind aber so lang wie nötig. Versuche zu vermitteln worauf sich eine ID oder Klasse bezieht, während du dich so knapp wie möglich ausdrückst. Im Zweifelsfall liegt die Priorität immer auf der Verständlichkeit gegenüber der Knappheit.
Kombination von SelektorenVermeide extreme Kombination von Selektoren mit dem Komma. Arbeite stattdessen mit modulorientierten Klassen, der Vererbung im CSS und ggf. über die Namensgebung der Module bei der Attribute Selektion.
Kurzschreibweisen von EigenschaftenBenutze Shorthand Properties wann immer möglich. CSS offeriert eine Vielfalt an Shorthand Properties wie z.B. background, font, border oder animation.
margin-collapseTreffen sich ein margin-bottom und ein margin-top, dann wirkt nur der Größere. Gewöhn Dir am Besten an für Texte Margin nur in eine Richtung zu vergeben.
Muster mit Pseudo-KlassenErfolgt das Styling über ein konkretes Muster kann es mit Pseudo-Klassen umgesetzt werden.
Reihenfolge der CSS-EigenschaftenÜberlege Dir ein Konzept für die Reihenfolge der CSS-Eigenschaften.
Tiefe der CSS SelektionVersuche mit 1 bis 2 Ebenen der CSS-Kaskade auszukommen.

► Weitere Infos

Externe Quellen

Google HTML / CSS Style Guide

Artikel und Beispiele von Google für besseren Quellcode.
https://google.(...)htmlcssguide.xml


BEM - Blocks, Elements and Modifiers

Ausgetüffteltes Konzept für das Schreiben von CSS.
http://getbem.com/introduction/


Style Lint

Das Sortieren der Eigenschaften sollte man, wenn das Konzept steht, dann automatisieren. Style Lint ist dafür sehr gut zu gebrauchen.
https://github.com/stylelint/stylelint


Stylelint: The Style Sheet Linter We’ve Always Wanted

Artikel zu Style Lint.
https://www.smashingmagazine.com(...)stylelint(...)