forked from mdo/code-guide
-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
409 lines (375 loc) · 22.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
---
layout: default
---
<div class="heading" id="toc">
<h2>Inhaltsverzeichnis</h2>
</div>
<div class="section toc">
<div class="col">
<h4><a href="#html">HTML</a></h4>
<ul>
<li><a href="#html-syntax">Syntax</a></li>
<li><a href="#html-doctype">HTML5 doctype</a></li>
<li><a href="#html-lang">Language Attribut</a></li>
<li><a href="#html-encoding">Zeichenkodierung</a></li>
<li><a href="#html-ie-compatibility-mode">Internet Explorer Kompatibilitätsmodus</a></li>
<li><a href="#html-style-script">CSS und JavaScript includes</a></li>
<li><a href="#html-practicality">Praktisch vor Rein</a></li>
<li><a href="#html-attribute-order">Attributreihenfolge</a></li>
<li><a href="#html-boolean-attributes">Boolesche Attribute</a></li>
<li><a href="#html-reducing-markup">Reduzierung des Markup</a></li>
<li><a href="#html-javascript">JavaScript generiertes Markup</a></li>
</ul>
</div>
<div class="col">
<h4><a href="#css">CSS</a></h4>
<ul>
<li><a href="#css-syntax">CSS syntax</a></li>
<li><a href="#css-declaration-order">Reihenfolge der Deklarationen</a></li>
<li><a href="#css-import">Vermeide @import</a></li>
<li><a href="#css-media-queries">Platzierung von Medienabfragen</a></li>
<li><a href="#css-prefixed-properties">Vorbestimmte Eigenschaften</a></li>
<li><a href="#css-single-declarations">Einfache Deklarationen</a></li>
<li><a href="#css-shorthand">Kurznotation</a></li>
<li><a href="#css-nesting">Verschachtelung in Less und Sass</a></li>
<li><a href="#css-comments">Kommentare</a></li>
<li><a href="#css-classes">Klassen</a></li>
<li><a href="#css-selectors">Selektoren</a></li>
<li><a href="#css-organization">Aufbau</a></li>
</ul>
</div>
</div>
<div class="section" id="golden-rule">
<div class="col">
<h2>Goldene Regel</h2>
<p>Halte dich immer an definierte Regeln - seien es diese, oder eigene. Große oder kleine Fehler - melde dich, wenn du Unstimmigkeiten gefunden hast. Um Beiträge zu diesem Styleguide zu liefern, öffne bitte ein Issue auf <a href="https://github.com/mdo/code-guide/issues/new">GitHub</a>.</p>
</div>
<div class="col">
<blockquote>
<p>Jede Zeile Code sollte so aussehen, als wenn sie von einer Person geschrieben wurde, egal, wieviele wirklich daran gearbeitet haben.</p>
</blockquote>
</div>
</div>
<div class="heading" id="html">
<h2>HTML</h2>
</div>
<div class="section" id="html-syntax">
<div class="col">
<h3>Syntax</h3>
<ul>
<li>Benutze Soft-Tabs mit 2 Leerzeichen - es ist die einzige Möglichkeit zu garantieren, dass der Code in allen Umgebungen gleich gerendert wird.</li>
<li>Verschachtelte Elemente sollten einfach eingerückt werden (mit 2 Leerzeichen).</li>
<li>Verwende Anführungszeichen für Attribute, keine Apostrophe.</li>
<li>Benutze keine abschließenden Schrägstriche in selbstschließenden Elementen - die <a href="http://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag">HTML5 Spezifikationen</a> besagen, dass sie optional sind.</li>
<li>Lasse keine schließenden Tags weg (z.B. <code></li></code> oder <code></body></code>).</li>
</ul>
</div>
<div class="col">
{% highlight html %}{% include html/syntax.html %}{% endhighlight %}
</div>
</div>
<div class="section" id="html-doctype">
<div class="col">
<h3>HTML5 Doctype</h3>
<p>Aktiviere den Standardmodus und konsistenteres Rendering in allen Browsern, indem der Doctype am Beginn jeder HTML Seite angegeben wird.</p>
</div>
<div class="col">
{% highlight html %}{% include html/doctype.html %}{% endhighlight %}
</div>
</div>
<div class="section" id="html-lang">
<div class="col">
<h3>Sprachattribut</h3>
<p>Aus der HTML5 Spezifikation:</p>
<blockquote>
<p>Autoren wird empfohlen, ein Sprachattribut im Root-HTML Tag anzugeben, um die Sprache des Dokuments bekanntzumachen. Es hilft Sprachausgabetools die richtige Aussprache zu wählen, Übersetzungstools die richtigen Regeln zu verwenden, usw.</p>
</blockquote>
<p>Weitere Informationen über das <code>lang</code> Attribut finden sich <a href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-html-element">in den Spezifikationen</a>.</p>
<p>Auf Sitepoint findet sich eine <a href="http://reference.sitepoint.com/html/lang-codes">Liste der Sprachcodes</a>.</p>
</div>
<div class="col">
{% highlight html %}{% include html/lang.html %}{% endhighlight %}
</div>
</div>
<div class="section" id="html-ie-compatibility-mode">
<div class="col">
<h3>IE Kompatibilitätsmodus</h3>
<p>Der Internet Explorer unterstützt einen Kompatibilitätsmodus durch den <code><meta></code> Tag, um anzugeben, unter welcher IE Version die Seite gerendert werden soll. Sofern es andere Umstände nicht verlangen, sollte immer die modernste Version gewählt werden, indem der <strong>Edge Modus</strong> verwendet wird.</p>
<p>Weitere Informationen hält dieser hervorragende <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e"> Stack Overflow Artikel</a> bereit.</p>
</div>
<div class="col">
{% highlight html %}{% include html/ie-compatibility-mode.html %}{% endhighlight %}
</div>
</div>
<div class="section" id="html-encoding">
<div class="col">
<h3>Zeichenkodierung</h3>
<p>Das richtige Rendering des Inhalts kann schnell und einfach mit einer expliziten Zeichenkodierung festgelegt werden. Wenn die Zeichenkoderung auf diese Art gesetzt wurde, kann auf die einzelne Deklaration in HTML Elementen verzeichtet werden, sofern sie mit der des Dokumentes übereinstimmen (normalerweise UTF-8).</p>
</div>
<div class="col">
{% highlight html %}{% include html/encoding.html %}{% endhighlight %}
</div>
</div>
<div class="section" id="html-style-script">
<div class="col">
<h3>CSS und JavaScript includes</h3>
<p>Nach den HTML5 Spezifikationen ist es nicht notwendig, einen <code>type</code> anzugeben, da CSS und JavaScript Dateien per Voreinstellung als <code>text/css</code> und <code>text/javascript</code> erwartet werden.</p>
<h4>HTML5 Spezifikation links</h4>
<ul>
<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element">Benutzung von link</a></li>
<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element">Benutzung von style</a></li>
<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element">Benutzung von script</a></li>
</ul>
</div>
<div class="col">
{% highlight html %}{% include html/style-script.html %}{% endhighlight %}
</div>
</div>
<div class="section" id="html-practicality">
<div class="col">
<h3>Praktisch vor Rein</h3>
<p>Bemühe dich, die HTML Standards und Semantik beizubehalten, aber nicht zum Preis von Praktikabilität. Benutze so wenig Markup mit den wenigsten Komplexitäten, wie möglich.</p>
</div>
</div>
<div class="section" id="html-attribute-order">
<div class="col">
<h3>Attributreihenfolge</h3>
<p>HTML Attribute sollten in der folgenden Ordnung erscheinen, um die Leserlichkeit zu erleichtern.</p>
<ul>
<li><code>class</code></li>
<li><code>id</code>, <code>name</code></li>
<li><code>data-*</code></li>
<li><code>src</code>, <code>for</code>, <code>type</code>, <code>href</code></li>
<li><code>title</code>, <code>alt</code></li>
<li><code>aria-*</code>, <code>role</code></li>
</ul>
<p>Klassen beinhalten wiederverwendbare Komponenten, also kommen sie zuerst. IDs sind eher spezifisch und sollten seltener verwendet werden (z.B. für seiteninterne Lesezeichen), also kommen sie als zweites.</p>
</div>
<div class="col">
{% highlight html %}{% include html/attribute-order.html %}{% endhighlight %}
</div>
</div>
<div class="section" id="html-boolean-attributes">
<div class="col">
<h3>Boolesche Attribute</h3>
<p>Ein boolesches Attribute braucht keinen Wert. XHTML verlangt einen gegebenen Wert, aber HTML5 benötigt es nicht.</p>
<p>Weitere Informationen finden sich im <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes">WhatWG Abschnitt für boolesche Attribute</a>:</p>
<blockquote>
<p>Die Anwesenheit eines booleschen Attributes an einem Element symbolisiert den Wahr-Wert, die Abwesenheit des Attributs den Falsch-Wert.</p>
</blockquote>
<p>Wenn der Wert des Attributs angegeben werden <em>muss</em>, obwohl es eigentlich <strong>nicht notwendig ist</strong>, folge diesem WhatWG Leitsatz:</p>
<blockquote>
<p>Wenn das Attribut vorhanden ist, muss sein Wert entweder ein leerer String oder [...] der kanonische Name des Attributs ohne führendes oder nachgestelltes Leerzeichen sein.</p>
</blockquote>
<p><strong>Kurzgefasst: Füge keinen Wert hinzu.</strong></p>
</div>
<div class="col">
{% highlight html %}{% include html/boolean-attributes.html %}{% endhighlight %}
</div>
</div>
<div class="section" id="html-reducing-markup">
<div class="col">
<h3>Reduzierung des Markup</h3>
<p>Wenn möglich, vermeide überflüssige Elternelemente beim Schreiben von HTML. Oft sind hierfür Code-Iterationen und Refactoring notwendig, aber letzendlich wird weniger HTML produziert, wie das Beispiel zeigt:</p>
</div>
<div class="col">
{% highlight html %}{% include html/reducing-markup.html %}{% endhighlight %}
</div>
</div>
<div class="section" id="html-javascript">
<div class="col">
<h3>JavaScript generiertes Markup</h3>
<p>Das Schreiben von Markup in JavaScript macht den Inhalt schwerer zu finden, schwerer zu editieren und weniger performant. Vermeide dies, wo möglich.</p>
</div>
</div>
<div class="heading" id="css">
<h2>CSS</h2>
</div>
<div class="section" id="css-syntax">
<div class="col">
<h3>Syntax</h3>
<ul>
<li>Benutze Soft-Tabs mit 2 Leerzeichen - es ist die einzige Möglichkeit zu garantieren, dass der Code in allen Umgebungen gleich gerendert wird.</li>
<li>Lasse beim gruppieren von Selektoren jedem Selektor seine eigene Zeile.</li>
<li>Für bessere Lesbarkeit, füge ein Leerzeichen vor jeder öffnenden Klammer eines Deklarationsblocks hinzu.</li>
<li>Platziere schließende Klammern in einer neuen Zeile.</li>
<li>Füge ein Leerzeichen hinter jedem <code>:</code> für jede Deklaration hinzu.</li>
<li>Für ein genaueres Fehlerreporting sollte jede Deklaration in einer eigenen Zeile stehen.</li>
<li>Beende jede Deklaration mit einem Semikolon. Für die letzte Deklaration ist dies optional, aber ohne ist der Code fehleranfälliger.</li>
<li>Kommagetrennte Eigenschaftswerte sollten ein Leerzeichen nach jedem Komma enthalten (z.B.<code>box-shadow</code>).</li>
<li>Füge keine Kommata <em>innerhalb</em> <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code>, oder <code>rect()</code> Werten hinzu. Es hilft, verschiedene Farbwerte (Komma, kein Leerzeichen) von verschiedenen Eigenschaftswerten (Komma, mit Leerzeichen) zu unterscheiden.</li>
<li>Füge Eigenschaftswerten oder Farbwerten keine führenden Nullen hinzu (z.B., <code>.5</code> anstatt <code>0.5</code> und <code>-.5px</code> anstatt <code>-0.5px</code>).</li>
<li>Schreibe Hexwerte klein, z.B. <code>#fff</code>. Kleingeschriebene Buchstaben sind beim Lesen eines Dokumentes einfacher zu unterscheiden, da sie mehr einzigartige Formen aufweisen.</li>
<li>Verwende kurze Hexwerte, wenn möglich. Z.B. <code>#fff</code> anstatt <code>#ffffff</code>.</li>
<li>Setze Attributwerte in Anführungszeichen, z.B. <code>input[type="text"]</code>. <a href="http://mathiasbynens.be/notes/unquoted-attribute-values#css">Sie sind nur in einigen Fällen optional</a> und es ist eine Gewöhnung an Konsistenz.</li>
<li>Vermeide das Setzen von Einheiten für Nullwerte, z.B. <code>margin: 0;</code> anstatt <code>margin: 0px;</code>.</li>
</ul>
<p>Fragen bezüglich den hier verwendeten Begriffen? Weitere Informationen gibt es im <a href="http://de.wikipedia.org/wiki/Cascading_Style_Sheets#Syntax">Syntax Abschnitt des Cascading Style Sheet Artikels</a> auf Wikipedia.</p>
</div>
<div class="col">
{% highlight css %}{% include css/syntax.css %}{% endhighlight %}
</div>
</div>
<div class="section" id="css-declaration-order">
<div class="col">
<h3>Reihenfolge der Deklarationen</h3>
<p>Verbundene Eigenschaftsdeklarationen sollten in der folgenden Reihenfolge gruppiert werden:</p>
<ol>
<li>Positionierung</li>
<li>Box Modell</li>
<li>Typographie</li>
<li>Aussehen</li>
</ol>
<p>Positionierung kommt an erster Stelle, da es ein Element aus der normalen Verarbeitung eines Dokuments entfernen kann und Box Modell Styles überschreiben kann. Das Box Modell kommt als nächstes, da es die Größe und Platzierung der Komponente bestimmt.</p>
<p>Alles andere kommt hinterher, da es die Komponente im Inneren gestaltet, ohne die vorherigen beiden Sektionen zu beeinflussen</p>
<p>Eine komplette Liste der Eigenschaften und ihrer Reihenfolge kann bei <a href="http://twitter.github.com/recess">Recess</a> gefunden werden.</p>
</div>
<div class="col">
{% highlight css %}{% include css/declaration-order.css %}{% endhighlight %}
</div>
</div>
<div class="section" id="css-import">
<div class="col">
<h3>Vermeide <code>@import</code></h3>
<p>Verglichen mit <code><link></code>s ist <code>@import</code> langsamer, führt zu mehr Seitenanforderungen und kann andere unvorhergesehene Probleme verursachen. Vermeide es und benutze stattdessen andere Ansätze:</p>
<ul>
<li>Benutze mehrere <code><link></code> Elemente</li>
<li>Kompiliere das CSS mit einem Präprozessor wie Sass oder Less in eine einzige Datei</li>
<li>Verbinde die CSS Dateien mit Tools, die von Rails, Jekyll oder anderen Umgebungen bereitgestellt werden</li>
</ul>
<p>Weitere Informationen finden sich in einem <a href="http://www.stevesouders.com/blog/2009/04/09/dont-use-import/">Artikel von Steve Souders</a>.</p>
</div>
<div class="col">
{% highlight html %}{% include css/import.html %}{% endhighlight %}
</div>
</div>
<div class="section" id="css-media-queries">
<div class="col">
<h3>Platzierung von Medienabfragen</h3>
<p>Medienabfragen sollten so nahe wie möglich an den für sie relevanten Regeln platziert werden. Bündle sie nicht alle in einem separaten Stylesheet oder am Ende des Dokuments, andernfalls ist es einfach für andere, sie in Zukunft zu übersehen. Hier ist eine typische Deklaration.</p>
</div>
<div class="col">
{% highlight css %}{% include css/media-queries.css %}{% endhighlight %}
</div>
</div>
<div class="section" id="css-prefixed-properties">
<div class="col">
<h3>Vorbestimmte Eigenschaften</h3>
<p>Wenn herstellervorbestimmte Eigenschaften verwendet werden, rücke jede Eigenschaft so ein, dass die Deklarationswerte genau untereinander stehen, damit sie einfach bearbeitet werden können.</p>
<p>In Textmate, drücke <strong>Text → Edit Each Line in Selection</strong> (⌃⌘A). In Sublime Text 2, drücke <strong>Selection → Add Previous Line</strong> (⌃⇧↑) und <strong>Selection → Add Next Line</strong> (⌃⇧↓).</p>
</div>
<div class="col">
{% highlight css %}{% include css/prefixed-properties.css %}{% endhighlight %}
</div>
</div>
<div class="section" id="css-single-declarations">
<div class="col">
<h3>Einfache Deklarationen</h3>
<p>In Fällen, in denen ein Regelsatz <strong>nur eine einzige Deklaration</strong> enthält, sollte der Zeilenumbruch für leichtere Lesbarkeit und schnelleres Editieren entfernt werden.</p>
<p>Der Punkt ist hier Fehlererkennung - z.B. ein CSS Validator, der aussagt, dass ein Syntax Error in Zeile 183 vorliegt. Mit einer einzigen Deklaration kann man ihn nicht verfehlen. Bei vielen Deklarationen sind separate Zeilen ein Muss.</p>
</div>
<div class="col">
{% highlight css %}{% include css/single-declarations.css %}{% endhighlight %}
</div>
</div>
<div class="section" id="css-shorthand">
<div class="col">
<h3>Kurznotation</h3>
<p>Bemühe dich, Kurznotationen nur in den Fällen zu benutzen, wo alle verfügbaren Werte explizit gesetzt werden müssen. Übermäßig benutzte Eigenschaften sind beispielsweise:</p>
<ul>
<li><code>padding</code></li>
<li><code>margin</code></li>
<li><code>font</code></li>
<li><code>background</code></li>
<li><code>border</code></li>
<li><code>border-radius</code></li>
</ul>
<p>Oft müssen nicht alle Werte gesetzt werden, die eine Kurznotation repräsentiert. Zum Beispiel setzen HTML Überschriften nur den oberen und unteren margin, also müssen nur diese beiden Werte überschrieben werden, wenn es notwendig ist. Ausschweifende Benutzung von Kurznotation in Eigenschaften führt oft zu schlampigem Code mit unnötigen Überschreibungen und ungewollten Nebeneffekten.</p>
<p>Im Mozilla Entwicklernetzwerk gibt es einen großartigen Artikel über <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">Kurznotationen für Eigenschaften</a> für diejenigen, die mit Notationen und deren Verhalten nicht vertraut sind.</p>
</div>
<div class="col">
{% highlight css %}{% include css/shorthand.css %}{% endhighlight %}
</div>
</div>
<div class="section" id="css-nesting">
<div class="col">
<h3>Verschachtelung in Less und Sass</h3>
<p>Vermeide unnötige Verschachtelungen. Nur weil verschachtelt werden kann, heißt das nicht, dass man es immer sollte. Berücksichtige Verschachtelung nur, wenn Styles im Elternelement gültig sein müssen und wenn mehrere Elemente zu verschachteln sind.</p>
</div>
<div class="col">
{% highlight scss %}{% include css/nesting.scss %}{% endhighlight %}
</div>
</div>
<div class="section" id="css-comments">
<div class="col">
<h3>Kommentare</h3>
<p>Der Code wird von Menschen geschrieben und gepflegt. Stelle sicher, dass dein Code anschaulich, gut kommentiert und für andere zugänglich ist. Gute Kommentare vermitteln Kontext oder Zweck. Wiederhole nicht einfach den Komponenten- oder Klassennamen.</p>
<p>Stelle sicher, dass in längeren Kommentaren komplette Sätze geschrieben werden und kürze Sätze in generellen Anmerkungen.</p>
</div>
<div class="col">
{% highlight css %}{% include css/comments.css %}{% endhighlight %}
</div>
</div>
<div class="section" id="css-classes">
<div class="col">
<h3>Klassennamen</h3>
<ul>
<li>Schreibe Klassennamen in Kleinbuchstaben und benutze Bindestriche (keine Unterstriche oder camelCase). Bindestriche dienen als natürliche Unterbrechungen in verbundenen Klassen (z.B. <code>.btn</code> und <code>.btn-danger</code>).</li>
<li>Vermeide ausschweifende und beliebige Kurznotationen. <code>.btn</code> ist eine nützliche Abkürzung für <em>button</em>, aber <code>.s</code> ist bedeutungslos.</li>
<li>Benenne Klassen so kurz und bündig wie möglich.</li>
<li>Benutze aussagekräftige Namen; benutze zweck- oder strukturgebundene Namen, anstatt toll klingende.</li>
<li>Wähle ein Klassenpräfix, das auf die nächsten Eltern oder Basisklasse verweist.</li>
<li>Benutze <code>.js-*</code> Klassen, um Verhalten anzudeuten (im Gegensatz zu einem Style), aber halte diese Klassen aus dem CSS heraus.</li>
</ul>
<p>Außerdem ist es hilfreich, viele dieser Regeln beizubehalten, wenn Sass und Less Variablennamen erstellt werden.</p>
</div>
<div class="col">
{% highlight css %}{% include css/class-names.css %}{% endhighlight %}
</div>
</div>
<div class="section" id="css-selectors">
<div class="col">
<h3>Selektoren</h3>
<ul>
<li>Benutze Klassen anstatt generische Element-Tags, um eine optimale Renderingperformance zu erreichen.</li>
<li>Vermeide mehrere Attributselektoren (z.B. <code>[class^="..."]</code>) bei gewöhnlich verwendeten Komponenten. Es ist bekannt, dass die Browserperformance dadurch beeinträchtigt wird.</li>
<li>Halte Selektoren kurz und versuche die Anzahl der Elemente in jedem Selektor auf drei zu begrenzen.</li>
<li>Setze den Geltungsrahmen zum nächsten Elterntag <strong>nur</strong> wenn nötig (z.B. wenn keine Präfixklassen verwendet werden).</li>
</ul>
<p>Weitere informationen:</p>
<ul>
<li><a href="http://markdotto.com/2012/02/16/scope-css-classes-with-prefixes/">Geltungsrahmen von CSS Präfixklassen</a></li>
<li><a href="http://markdotto.com/2012/03/02/stop-the-cascade/">Stopp das Verschachteln</a></li>
</ul>
</div>
<div class="col">
{% highlight css %}{% include css/selectors.css %}{% endhighlight %}
</div>
</div>
<div class="section" id="css-organization">
<div class="col">
<h3>Aufbau</h3>
<ul>
<li>Ordne Codesektionen nach Komponenten an.</li>
<li>Entwickle eine konsistente Kommentierungshierarchie.</li>
<li>Benutze konsistente Leerzeichen zu deinem Vorteil, wenn einzelne Sektionen in einem größeren Dokument voneinander getrennt werden.</li>
<li>Wenn mehrere CSS Dateien verwendet werden, teile sie nach Komponenten, anstatt Seiten auf. Seiten können neu angeordnet und Komponenten verschoben werden.</li>
</ul>
</div>
<div class="col">
{% highlight css %}{% include css/organization-comments.css %}{% endhighlight %}
</div>
</div>
<div class="section" id="css-editor-prefs">
<div class="col">
<h3>Editor Einstellungen</h3>
<p>Stelle deinen Editor folgendermaßen ein, um verbreitete Inkonsistenzen und dirty diffs zu vermeiden:</p>
<ul>
<li>Benutze Soft-Tabs mit zwei Leerzeichen</li>
<li>Schneide nachlaufende Leerzeichen beim Speichern ab.</li>
<li>Aktiviere UTF-8 codierung.</li>
<li>Füge am Ende der Datei eine Leerzeile hinzu.</li>
</ul>
<p>Ziehe in Erwägung, diese Einstellungen in die <code>.editorconfig</code>-Datei deines Projektes zu schreiben. Für ein Beispiel, <a href="https://github.com/twbs/bootstrap/blob/master/.editorconfig">schaue dir diese Datei in Bootstrap an</a>. Mehr <a href="http://editorconfig.org">über EditorConfig erfahren</a>.</p>
</div>
</div>